Course notes 15
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses
Drawing into the Canvas

Basic Tools

Rectangles (the only primitive shape)
Paths - Lines
Arcs


Defining Shapes

Rectangle (fillRect, strokeRect, clearRect)

fillRect -draws a filled rectangle - requires the coordinates of the top left corner (x & y) plus the width and height

    Usage:

    myCanvasContext.fillRect(topLeftX topLeftY, width, height);

strokeRect - draws an outline - requires 4 coordinates (top left x and y, plus width and height)

    Usage:

    myCanvasContext.strokeRect(topLeftX topLeftY, width, height);

clearRect - clears the area defined by the coordinates - requires 4 coordinates (top left x and y, plus width and height)

    Usage:

    myCanvasContext.clearRect(topLeftX topLeftY, width, height);

Example of the rectangle code in action:

 <head>
    <script>
        function init() { 
            var canvas = document.getElementById('mycanvas');
            var ctx = canvas.getContext('2d');

            ctx.fillRect(0,0,200,210);

ctx.clearRect(100,75,60,60);
ctx.strokeRect(210,0,50,100);
ctx.strokeRect(210,110,50,100);
ctx.strokeRect(270,0,100,210);
ctx.clearRect(360,60,20,90);
ctx.fillRect(330,75,60,60); } </script> </head> <body onload="init()"> <canvas id="mycanvas" width='400px' height='300px'></canvas> </body>
See results of the Canvas Rectangle code

***MAKE SURE you do not draw outside of the defined canvas area or it will get clipped off.

Attributes of a Rect (fillStyle, strokeStyle, lineWidth)

Set the attributes BEFORE you draw the rectangle:

fillStyle - requires a color specified using name, hex, rgb, or rgba

    Usage:

    myCanvasContext.fillStyle = #FF0000;

strokeStyle - requires a color specified using hex, rgb, or rgba

    myCanvasContext.strokeStyle = #00FF00;

lineWidth - requires a number (can be a float)

    myCanvasContext.lineWidth = 3;

How to specify a color:

name: red
hex: #FFFFFF or #FFF (each digit counts for two)
rgb: rgb(255,255,0)
rgba (with alpha): rgba(255,165,0,1)

Example of how to change attributes:

 <head>
    <script>
        function init() { 
            var canvas = document.getElementById('mycanvas');
            var ctx = canvas.getContext('2d');

		      ctx.fillStyle = "red";
ctx.fillRect(0,0,100,100);
ctx.fillStyle = "#FF0000";
ctx.fillRect(110,0,100,100);
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(220,0,100,100);
ctx.fillStyle = "rgba(255,0,0,1)";
ctx.fillRect(330,0,100,100);

ctx.clearRect(30,30,370,40); } </script> </head> <body onload="init()"> <canvas id="mycanvas" width='450px' height='150px'></canvas> </body>

See results of changing the colors of the rectangle

Example of Stroke and Line Width attributes:

 <head>
    <script>
        function init() { 
            var canvas = document.getElementById('mycanvas');
            var ctx = canvas.getContext('2d');

            ctx.strokeStyle = "red";
ctx.lineWidth = 8;
ctx.strokeRect(0,0,100,100);

ctx.strokeStyle = "#AA0000";
ctx.lineWidth = 6;
ctx.strokeRect(110,10,100,100);

ctx.strokeStyle = "rgb(160,0,0)";
ctx.lineWidth = 12;
ctx.strokeRect(220,20,100,100);

ctx.lineWidth = 24;
ctx.strokeStyle = "rgba(0,0,0,.5)";
ctx.strokeRect(330,30,100,100); } </script> </head> <body onload="init()"> <canvas id="mycanvas" width='450px' height='150px'></canvas> </body>

See results of line width and stroke styles

Example of Applying a stroke to a filled shape:

		    ctx.fillStyle = "green";
ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
ctx.lineWidth = 8;
ctx.fillRect(100,50,100,100);
ctx.strokeRect(100,50,100,100);

See example of a shape with a stroke

Drawing Paths ( beginPath, closePath, moveTo, lineTo, fill, stroke )

beginPath - starts storing a list of lines or arcs to form the path. BeginPath starts with nothing in the drawing.

    Usage:

    myCanvasContext.beginPath();

closePath - this is optional. It will try to close the shape by drawing a line from the last point to the starting point. If you do not close the path it will be an open shape unless the last point is exactly on top of the starting point.

    myCanvasContext.closePath();

moveTo - sets the starting position for the drawing.

    myCanvasContext.moveTo(x,y);

lineTo - draws a line from whereever it currently is to the specified point - x,y.

    myCanvasContext.lineTo(x,y);

fill( ) - draws the shape on the screen - it will be a filled shape.

    myCanvasContext.fill();

stroke( ) - draws a shape with only an outline.

    myCanvasContext.stroke();

Example using the path methods:

 <head>
    <script>
        function init() { 
            var canvas = document.getElementById('mycanvas');
            var ctx = canvas.getContext('2d');

        	  ctx.beginPath();
ctx.moveTo(44,25);
ctx.lineTo(75,25);
ctx.lineTo(90,51);
ctx.lineTo(75,78);
ctx.lineTo(44,78);
ctx.lineTo(28,51);

ctx.fill(); } </script> </head>
See results using the path methods with fill()

Example of Stroke and Line Width attributes:

 <head>
    <script>
        function init() { 
            var canvas = document.getElementById('mycanvas');
            var ctx = canvas.getContext('2d');

		      ctx.beginPath();
ctx.moveTo(12,12);
ctx.lineTo(85,12);
ctx.lineTo(85,38);
ctx.lineTo(12,38);
ctx.lineTo(17,18);
ctx.lineTo(77,18);
ctx.lineTo(77,31);
ctx.lineTo(19,32);
ctx.lineTo(19,24);
ctx.lineTo(70,25);
ctx.stroke(); } </script> </head>

See results of paths with stroke()

***Safari has trouble filling and stroking the same path so you may need to repeat the code like the following:

		      ctx.beginPath();
            ctx.fillStyle = "#FFFF00";
ctx.moveTo(12,12);
ctx.lineTo(85,12);
ctx.lineTo(85,38);
ctx.lineTo(12,38);
ctx.lineTo(17,18);
ctx.lineTo(77,18);
ctx.lineTo(77,31);
ctx.lineTo(19,32);
ctx.lineTo(19,24);
ctx.lineTo(70,25);
ctx.fill(); ctx.beginPath(); ctx.strokeStyle = "#FF8800";
ctx.moveTo(12,12);
ctx.lineTo(85,12);
ctx.lineTo(85,38);
ctx.lineTo(12,38);
ctx.lineTo(17,18);
ctx.lineTo(77,18);
ctx.lineTo(77,31);
ctx.lineTo(19,32);
ctx.lineTo(19,24);
ctx.lineTo(70,25);
ctx.stroke();
See results

Drawing Arcs ( x, y, radius, startAngle, endAngle, anticlockwise)
    arc
  • x and y are the center coordinates.
  • radius isthe length from the center to the perimeter.
  • startAngle and endAngle define the start and end points of the arc in radians. The angles are measured from the x axis.
  • anticlockwise when true draws the arc anticlockwise - false closes it in a clockwise direction.

    Usage:

    myCanvasContext.arc(200, 150, 50, Math.PI, true);

Radians - since we need to specify the start and end angles in radians, it is useful to understand how to convert from degrees to radians.

180 degrees = Math.PI
90 degrees = Math.PI / 2
45 degrees = Math.PI / 4
360 degrees = Math.PI * 2

Example using the path methods:

 <head>
    <script>
        function init() { 
            var canvas = document.getElementById('mycanvas');
            var ctx = canvas.getContext('2d');

        	  ctx.beginPath();
ctx.arc(100, 75, 50, Math.PI, true);
ctx.stroke();

ctx.beginPath();
ctx.arc(220, 75, 50, Math.PI/2, false);
ctx.closePath();
ctx.stroke(); } </script> </head>
See results using the arcs