Canvas tag

Rectangles

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

// rectangles
ctx.fillRect(x,y,width,height); // draws a filled rect
ctx.strokeRect(x,y,width,height); // draws a rect outline
ctx.clearRect(x,y,width,height); // clears the specified area and makes it fully transparent


ctx.fillStyle = "rgb(200,0,0)";
ctx.fillStyle = "rgba(200,0,0,0.5)";

Paths

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

ctx.quadraticCurveTo(cp1x, cp1y, x, y);
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise); // draw an arc
ctx.rect(x,y,width,height); // draw a rectangle; moveTo automatically set to 0,0

Images

There are two steps.

• a reference to a JavaScript Image object or other canvas element as a source
• we draw the image on the canvas using the drawImage function

On the same page

via document.images, document.getElementByTagName, or document.getElementById method

From other domains

via crossOrigin attribute on an Image; the source server must enable cross-domain access to the image

Other canvas elements

via document.getElementsByTagName, document.getElementById

Creating an image via code

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

For Gecko 1.9.2 and earlier

var img = new Image();   // Create new img element
img.onload = function(){
  // execute drawImage statements here
};
img.src = 'myImage.png'; // Set source path

Embedding an image via data: url

var img = new Image();
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

drawImage

ctx.drawImage(image, x, y);

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
  };
  img.src = '/files/4531/backdrop.png';
}

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

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    for (var i=0;i<4;i++){
      for (var j=0;j<3;j++){
        ctx.drawImage(img,j*50,i*38,50,38);
      }
    }
  };
  img.src = '/files/4533/rhino.jpg';
}

Colors

// 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)";

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i=0;i<6;i++){
    for (var j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                       Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}

A strokeStyle example using arc

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i=0;i<6;i++){
    for (var j=0;j<6;j++){
      ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + 
                       Math.floor(255-42.5*j) + ')';
      ctx.beginPath();
      ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
      ctx.stroke();
    }
  }
}