Prepared by Yauheni Hladkiy

<canvas> is HTML5 element can be used to draw graphics via scripting in JavaScript.

Basic usage


The rendering context

							var canvas = document.getElementById('canvas');
							var ctx = canvas.getContext('2d');

Basic template

						    function draw(){
						      var canvas = document.getElementById('canvas');
						      var ctx = canvas.getContext('2d');
						<body onload="draw();">

Drawing shapes with canvas

The grid

Drawing rectangles

							fillRect(x, y, width, height);
							strokeRect(x, y, width, height);
							clearRect(x, y, width, height);

Drawing paths

Steps for make shapes using paths:

  1. First, you create the path - beginPath()
  2. Then you use drawing commands to draw into the path - Path methods
  3. Then you close the path - closePath()
  4. Once the path has been created, you can stroke or fill the path to render it - stroke() or fill()

Path methods

  1. moveTo(x,y);
  2. lineTo(x,y);
  3. arc(x, y, radius, startAngle, endAngle, anticlockwise);
  4. arcTo(x1, y1, x2, y2, radius);
  5. rect(x, y, width, height);
  6. quadraticCurveTo(cp1x, cp1y, x, y);
  7. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

Path example

							function draw() {
							  var canvas = document.getElementById('canvas');
							  var ctx = canvas.getContext('2d');
							  ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
							  ctx.arc(75,75,35,0,Math.PI,false);  // Mouth (clockwise)
							  ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
							  ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye

Applying styles and colors


							fillStyle = color //sets the style used when filling shapes.
							strokeStyle = color //sets the style for shapes' outlines.

							ctx.fillStyle = 'orange';
							ctx.fillStyle = '#FFA500';
							ctx.fillStyle = 'rgb(255, 165, 0)';
							ctx.fillStyle = 'rgba(255, 165, 0, 1)';

							ctx.globalAlpha = 0.2;

Line styles

							lineWidth = value;
							lineCap = type; // butt, round, square
							lineJoin = type; // round, bevel, miter


							createLinearGradient(x1, y1, x2, y2);
							createRadialGradient(x1, y1, r1, x2, y2, r2);

							gradient.addColorStop(position, color);

Using images

Creating an image

							var img = new Image();   // Create new img element
							img.src = 'myImage.png'; // Set source path

img.onload = function() {
  ctx.drawImage(img, 0, 0);

Drawing images

  • drawImage(image, x, y);
  • drawImage(image, x, y, width, height);
  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Drawing images example


Saving and restoring state

  • save();
  • restore();

Transformation methods

  • translate(x, y);
  • rotate(angle);
  • scale(x, y);


Basic animation steps

  1. Clear the canvas - clearRect()
  2. Save the canvas state
  3. Draw animated shapes
  4. Restore the canvas state

Controlling an animation

  • setInterval(function, delay)
  • setTimeout(function, delay)
  • requestAnimationFrame(callback)


Thank You