HTML Canvas: Introduction

In this tutorial, we will present the html canvas and all its methods. For an alternative, the standard reference is the Mozilla canvas tutorial, although many other interesting tutorials can be found on the web.

This tutorial will focus on 2d drawings; 3d drawings will be done using WebGL and covered in other tutorials.

We assume that you are familiar with javascript. In all of our examples, we will use an embedded html canvas as described by the following html code

If you feel curious (and adventurous!), you can view (and modify!) the actual code used to generate the window on the right by clicking on the image above. However it will likely seem a bit overwhelming at this time ... but hopefully the canvas-related methods used should become familiar by the time you complete this tutorial.

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      canvas {border: 2px solid green;}
    </style>
  </head>
  <body>
    <p>Follow the instruction to learn about canvas coordinates.
    </p>
    <canvas height="300" id="canvas" width="400"> </canvas>
    <h2>For the advanced reader</h2>
    <p>If you took a look at the code, and moved your mouse slowly enough,
      you may have noticed that the information given seems not to
      correspond to the actual size of the canvas, but actually appears
      to be that of a larger canvas.  Can you think of why that could be?
      If so, can you think of a way to change the code and verify
      your hypothesis?</p>
  </body>
  <script>
// quick hack
var $ = parent.$;
var ctx = $('#canvas', document)[0].getContext("2d");
var canvasMinX = $("#canvas", document).offset().left;
var canvasWidth = $("#canvas", document).width();
var canvasMaxX = canvasMinX + canvasWidth;
var canvasMinY = $("#canvas", document).offset().top;
var canvasHeight = $("#canvas", document).height();
var canvasMaxY = canvasMinY + canvasHeight;
var canX;
var canY;
var draw_mouse_info = false;
var ar1, ar2;

$("#canvas", document).bind("mouseleave", function (){
      draw_mouse_info = false;});
$("#canvas", document).bind("mouseenter", function (){
      draw_mouse_info = true;});
$("#canvas", document).bind("mousemove", function (evt){
  canX = evt.pageX - canvasMinX;
  canY = evt.pageY - canvasMinY;
  });

var mouse = function() {
var x, y;
    ctx.beginPath();
    ctx.fillStyle = "#0000aa";
    ctx.arc(canX, canY, 5, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
  ctx.font = "10pt Helvetica";
  ctx.fillStyle = "black";
  x = Math.min(canX, canvasWidth-70);
  y = Math.min(canY, canvasHeight-15);
  ctx.fillText("(" + canX + ", " + canY + ")", x+5, y+5);
};

function HorizontalArrow(x1, y1, colour) {
   this.x1 = x1 + 0.5;
   this.y1 = y1 + 0.5;
   this.colour = colour;
   this.del = 5;

this.draw = function (x2, y2) {
   ctx.beginPath();
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 + this.del, this.y1 + this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 + this.del, this.y1 - this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(x2, y2);
   ctx.lineTo(x2 - this.del, y2 + this.del);
   ctx.moveTo(x2, y2);
   ctx.lineTo(x2 - this.del, y2 - this.del);

ctx.strokeStyle = this.colour;
   ctx.stroke();
   }
}

function VerticalArrow(x1, y1, colour) {
   this.x1 = x1 + 0.5;
   this.y1 = y1 + 0.5;
   this.colour = colour;
   this.del = 5;

this.draw = function (x2, y2) {
   ctx.beginPath();
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 - this.del, this.y1 + this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(this.x1 + this.del, this.y1 + this.del);
   ctx.moveTo(this.x1, this.y1);
   ctx.lineTo(x2, y2);
   ctx.lineTo(x2 - this.del, y2 - this.del);
   ctx.moveTo(x2, y2);
   ctx.lineTo(x2 + this.del, y2 - this.del);

ctx.strokeStyle = this.colour;
   ctx.stroke();
   }
}

ar1 = new HorizontalArrow(0, 125, "#0000cc");
ar2 = new VerticalArrow(105, 0, "#00cc00");

function Info() {
    this.draw = function() {
      ar1.y1 = canY-3;
      ar1.draw(canX-7, canY-3);
      ctx.font = "10pt Helvetica";
      ctx.fillStyle = "#0000aa";
      ctx.fillText("X = " + canX, Math.min(canX/2, 30), canY-10);
      ar2.x1 = canX-3;
      ar2.draw(canX-3, canY-7);
      ctx.font = "10pt Helvetica";
      ctx.fillStyle = "#00aa00";
      ctx.fillText("Y = " + canY, Math.min(canX, canvasWidth-50), Math.min(canY/2, 80));
  }
}
info = new Info();

function instructions(){
  ctx.font = "15pt Helvetica";
  ctx.fillStyle = "tan";
  ctx.fillText("Canvas", 55, 25);
  ctx.fillText("Bring your mouse inside", 5, 125);
};
instructions();

draw_mouse = false;
function update() {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  if (draw_mouse_info){
    mouse();
    info.draw();
  }
  else{
    instructions();
  }
}
setInterval(update, 20);
  </script>
</html>

Your notebook

Keep your personal notes here. These notes are stored by your browser on your own computer, and will be available from any page on this site. You can choose to use html syntax for formatting.