Drawing

Shapes & Styles

• rectangle
• paths

Rectangle

fillRect(x, y, width, height)   // Draws a filled rectangle
								strokeRect(x, y, width, height) // Draws a rectangular outline
								clearRect(x, y, width, height)  // Clears rectangular area

Drawing example

function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext){
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

Path

• First, you create the path.

beginPath()

• Then you use drawing commands to draw into the path.

Path methods; closePath()

• Once the path has been created, you can stroke or fill the path to render it.

stroke(); fill()

Drawing paths example

function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext){
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.fill();
  }
}

Style colors

If we want to apply colors to a shape, there are two important properties we can use: fillStyle and strokeStyle.

// these all set the fillStyle to 'orange'
							ctx.fillStyle = "orange";
							ctx.fillStyle = "#FFA500";
							ctx.fillStyle = "rgb(255,165,0)";
							ctx.fillStyle = "rgba(255,165,0,1)";
							

Animation

Saving and restoring state

Two methods which are indispensable once you start generating ever more complex drawings.

save(); restore();

Basic animation steps

• Clear the canvas
• Save the canvas state
• Draw animated shapes
• Restore the canvas state

Controlling an animation

Scheduled updates

setInterval(function, delay)    // no user interaction
							setTimeout(function, delay)     // use keyboard or mouse events
							requestAnimationFrame(callback) // user interaction

Animation code example

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0,0,300,300); // clear canvas

  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save(); // save state

  // Draw smth
  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
  ctx.translate(105,0);
  ctx.fillRect(0,-12,50,24);
  ctx.drawImage(earth,-12,-12);
	......
  ctx.restore(); // restore state

  window.requestAnimationFrame(draw);
}