Basic Canvas Playground

In this example below you will see how to do a Basic Canvas Playground with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nvr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nvr ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Basic Canvas Playground</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="canvas" width="800" height="600" style="outline:solid;"></canvas>
<br/>
<button onclick="draw();">Call the draw method</button>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/nvr/basic-canvas-playground-aBmGJW */
#canvas {
  /* NOTE: canvas becomes almost like an image, resizing it after it is drawn should be used sparingly, like for special effects. */
  /*width: 300px;
  height: 600px;*/
}

/*Downloaded from https://www.codeseek.co/nvr/basic-canvas-playground-aBmGJW */
// Global variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// hoisted functions
function draw () {
  var cx = 400, // center x
      cy = 300, // center y
      a = Math.floor(Math.random() * 12) + 3, // number of angles
      iRegularAngle = 2 * Math.PI / a,
      iAngleOffset = 0,
      i,
      radius = 100,
      iWidth = radius,
      iLength = radius,
      px, // current point x
      py, // current point y
      aPoints;
  clear();
  // Getting points of a regular polygon
  console.log('draw: ' + a);
	// get origin point
	px = cx + iWidth * Math.cos(0 + iAngleOffset);
	py = cy + iLength * Math.sin(0 + iAngleOffset);
	aPoints = [{ x: px, y: py }];
	for (i = 1; i <= a; i += 1) {
		// get destination point
		px = cx + iWidth * Math.cos(i * iRegularAngle + iAngleOffset);
		py = cy + iLength * Math.sin(i * iRegularAngle + iAngleOffset);
		aPoints.push({ x: px, y: py });
	}
  // back to starting point:
  //aPoints.push(aPoints[0]);
  /////////////////////////////////
  // What to draw:
  ctx.save(); // ---> save defaults
  //*
  ctx.translate(cx,cy); // ---> effects all future calls in context
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  //
  ctx.save();
  ctx.translate(50,5); // ---> effects all future calls in context
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.restore(); // restore to saved context before the translate call
  //
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  //
  //ctx.strokeRect(0, 75, 75, 75);
  //
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';//*/
  //
  ctx.restore(); // Return to defaults
  //
  a = aPoints.length;
  ctx.beginPath(); // ---> ask the context to start tracking what we want to draw
  // Move to start point
  ctx.moveTo(aPoints[0].x, aPoints[0].y);
  // draw point to point
  for (i = 1; i < a; i += 1) {
    if ( i % 2 === 0) {
      ctx.strokeStyle = "#f00"; // --> no effect because style only has effect at stroke(), fill(), etc. call
    }
    ctx.lineTo(aPoints[i].x, aPoints[i].y);
  }
  ctx.closePath(); // ---> tell the context to close gaps in the shape
  // style can be set any time before asking it to draw
  ctx.lineWidth = a;
  ctx.strokeStyle = "rgba(0,0,255,0.5)";
  ctx.fillStyle = "rgba(0,0,255,0.5)";
  ctx.fill(); // draw the fill
  ctx.stroke(); // draw the lines
  //ctx.restore();
};

function clear () {
  ctx.clearRect(0,0,800,600);
};

Comments