canvas

<canvas> is an HTML element

used to draw graphics using scripting

some applications

<canvas> element

  
<canvas id="my-canvas" width="150" height="150"></canvas>

<canvas> element is not supported in some older browsers

fallback content

  
<canvas id="my-canvas" width="150" height="150">Not supported!</canvas>
<canvas id="my-canvas" width="150" height="150"/>
  <img src="IMAGE_PATH">
</canvas>

access the rendering context

getContext()

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

grid

rectangles

only primitive shape supported by canvas
all other shapes are created using paths
  
var ctx = canvas.getContext('2d');

//draws a filled rectangle
ctx.fillRect(25,25,100,100); 

//draws a rectangular outline
ctx.clearRect(45,45,60,60); 

//clears the specified rectangular area
ctx.strokeRect(50,50,50,50);

draw rectangles


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

//draws a filled rectangle
ctx.fillRect(25, 25, 100, 100); 

//draws a rectangular outline
ctx.clearRect(45, 45, 60, 60); 

//clears the specified rectangular area
ctx.strokeRect(50, 50, 50, 50);

paths

how to?

create the path - beginPath()

use drawing commands to draw into the path

close the path - closePath()

stroke or fill the path to render it - stroke() / fill()

drawing on canvas

moveTo(x, y)

lineTo(x, y)

arc(x, y, radius, startAngle, endAngle, anticlockwise)

arcTo(x1, y1, x2, y2, radius)

quadraticCurveTo(cp1x, cp1y, x, y)

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

rect(x, y, width, height)

draw a triangle


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

ctx.beginPath();
ctx.moveTo(250, 100);
ctx.lineTo(100, 400);
ctx.lineTo(400, 400);
ctx.fill();

draw a circle


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

ctx.beginPath();
ctx.arc(250, 250, 100, 0, 2*Math.PI, true);
ctx.fill();

draw an arc


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

ctx.beginPath();
ctx.arc(250, 250, 100, 0, Math.PI, false);
ctx.stroke();

draw an arc


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

ctx.beginPath();
ctx.moveTo(250, 250);
ctx.arcTo(350, 250, 350, 350, 100);
ctx.stroke();

draw quadratic curve


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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(200, 100, 20, 200);
ctx.stroke();

draw bezier curve


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

ctx.beginPath();
ctx.moveTo(20, 100);
ctx.bezierCurveTo(50, 200, 150, 50, 300, 100);
ctx.stroke();

Path2D objects

 
new Path2D();     // empty path object
new Path2D(path); // copy from another Path2D object
new Path2D(d);    // path from SVG path data  
 
 
 
var rectangle = new Path2D();
rectangle.rect(10, 10, 70, 70);
ctx.stroke(rectangle);

var circle = new Path2D();
circle.moveTo(100, 25);
circle.arc(100, 35, 25, 0, 2 * Math.PI);
ctx.fill(circle);

styles and colors

 
ctx.fillStyle = "#FFA500";
ctx.strokeStyle = "red";
ctx.globalAlpha = 0.2;
ctx.lineWidth = 3;

//createLinearGradient(x1, y1, x2, y2)
var lineargradient = ctx.createLinearGradient(0, 0, 200, 200); 
lineargradient.addColorStop(0, 'red');
lineargradient.addColorStop(0.5, 'blue');
lineargradient.addColorStop(1, 'black');

//createRadialGradient(x1, y1, r1, x2, y2, r2);
var radgrad = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); 
radgrad.addColorStop(0, 'red');
radgrad.addColorStop(0.9, 'blue');
radgrad.addColorStop(1, 'yellow');

linear gradient


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

var lineargradient = ctx.createLinearGradient(0, 0, 480, 0); 
lineargradient.addColorStop(0, "violet");
lineargradient.addColorStop(0.5, "indigo");
lineargradient.addColorStop(1, "blue");

ctx.fillStyle = lineargradient;
ctx.rect(10, 200, 480, 100);
ctx.fill();

text


//filled using the current fillStyle
ctx.fillText("Hello world", 100, 150); 

//filled using the current strokeStyle
ctx.strokeText("Hello world", 100, 150);

images


ctx.drawImage(image, x, y);
ctx.drawImage(image, x, y, width, height); //scaling

//use of image smoothing algorithms when scaling images
ctx.imageSmoothingEnabled = false;
image can be a reference to an HTMLImageElement object or another canvas element
image from scratch

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

draw image


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

var img = new Image();
img.src = "https://upload.wikimedia.org/wikipedia/commons/5/54/Tigress_at_Jim_Corbett_National_Park.jpg";
img.onload = function(){
  ctx.drawImage(img, 0, 0, 500, 500);
};

save/restore


save(); //saves the entire state of the canvas
restore(); //restores the most recently saved canvas state

transformations

translate(x, y);

rotate(angle);

scale(x, y);

transformations example


var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 300, 50);
ctx.translate(80, 80);
ctx.fillRect(0, 0, 300, 50);

ctx.scale(2, 2);
ctx.fillRect(0, 50, 300, 50);

ctx.rotate(Math.PI/2);
ctx.fillRect(0, 10, 300, 50);

saving images

 
canvas.toDataURL('image/png');
use it as the source of any <image> or put it into a hyper link with a download attribute to save it to disc 

var canvas = document.getElementById('my-canvas');

var image = canvas.toDataURL('image/png');
var imageElement = document.getElementsById("imgEle");
imageElement.src = image;