Drawing with Javascript and Canvas

The canvas element can dynamically render 2D, bitmapped images in HTML5 documents.

You can add a canvas element to your documents with the following markup-

<canvas></canvas>

Which displays the following-

Which isn't much. You can style a canvas element so it shows up more clearly-

<canvas style="border:1px solid #000;"></canvas>

And some extra rules to center it-

<canvas style="border:1px solid #000; display:block; margin:auto;"></canvas>

In order to display any graphics, you'll need to use Javascript. First, add an id value to the canvas element (CSS rules removed)-

<canvas id="canvas1"></canvas>

And then use the following Javascript code in order to draw on it.

var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');

context1.fillStyle = 'red';
context1.fillRect(30, 30, 50, 50);

context1.fillStyle = 'green';
context1.fillRect(120, 50, 50, 50);

context1.fillStyle = 'blue';
context1.fillRect(220, 70, 50, 50);

Canvas elements are 300 pixels wide and 150 pixels tall by default. You can resize a canvas using the height and width parameters. You could resize a canvas element using CSS rules, but the canvas's internal drawing size would not change.

<canvas id="canvas2" width="400" height="200"></canvas>

<script>
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');

context2.fillStyle = 'red';
context2.fillRect(30, 20, 50, 50);

context2.fillStyle = 'green';
context2.fillRect(120, 60, 50, 50);

context2.fillStyle = 'blue';
context2.fillRect(220, 100, 50, 50);

context2.fillStyle = 'cyan';
context2.fillRect(320, 140, 50, 50);
</script>

By responding to mousedown events, you can implement a simple sketch script.

<canvas id="canvas3"></canvas>

<script>
var canvas3 = document.getElementById('canvas3');
var context3 = canvas3.getContext('2d');

canvas3.onmousedown = function() {
  canvas3.onmousemove = function(event) {
    context3.fillRect(event.offsetX, event.offsetY, 4, 4);
    document.onmouseup = function() {
      canvas3.onmousemove = null; // stop drawing
      // by listening to the document, we can respond to mouseups
      // even if the user moves the pointer off of the canvas
    }
  }
}
</script>

You can try out an example below. Just click, hold, and move the mouse pointer in the box below to start sketching.

The script above draw little 4x4 boxes all over the page. The following script uses a little extra code to draw smoother lines.

<canvas id="canvas4"></canvas>

<script>
var canvas4 = document.getElementById('canvas4');
var context4 = canvas4.getContext('2d');
var x=0;
var y=0;

canvas4.onmousedown = function(event) {
  x=event.offsetX;
  y=event.offsetY;
  context4.beginPath();
  canvas4.onmousemove = function(event) {
    context4.moveTo(x,y);
    context4.lineTo(event.offsetX, event.offsetY);
    context4.stroke();
    x=event.offsetX;
    y=event.offsetY;
  }
  document.onmouseup = function() {
    canvas4.onmousemove = null; // stop drawing
  }
}
</script>

As above, click, hold, and move the mouse pointer in the demo below to try out the prior code.

I hope this was useful. Mozilla.org has a more extensive tutorial.