Drawing with the HTML5 Canvas

HTML5 CANVAS
 Grants you a very fine level of control over individual pixels on
web page
 Can be used to create anything using JavaScript:
 Custom UI elements
 Image Manipulation
 Animations
 Custom keyboard and mouse interfaces
 Integrates seamlessly with video files, audio clips, and
touchscreen events

CANVAS API
 Created using the canvas element at any point within the <body> tag
group
 <canvas id=‘identifier’ height=‘500’ width=‘500’></canvas>
 Canvas must be initialized in JavaScript in order to draw on it.
 <script type=‘text/javascript’>
 var canvas = document.getElementById(identifier);
 var context = canvas.getContext(type);
 //perform tasks here
 </script>

CANVAS ELEMENT
 The HTML5 Canvas element is an HTML tag similar to the <div>, <a>,
or <table> tag
 It's important to understand the difference between the canvas element
and the canvas context
 The canvas element is the actual DOM node that's embedded in the HTML
page.
 The canvas context is an object with properties and methods that you can
use to render graphics inside the canvas element. The context can
be 2d or webgl (3d).
 Each canvas element can only have one context.

<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// do stuff here
</script>
</body>

DRAWING A LINE
 To draw a line using HTML5 Canvas, we can use
the beginPath(), moveTo(), lineTo(), and stroke() methods.
1. use the beginPath() method to declare that you are about to
draw a new path
2. use the moveTo() method to position the context point (i.e.
drawing cursor)
3. use the lineTo() method to draw a straight line from the
starting position to a new position
4. to make the line visible, apply a stroke to the line
using stroke()

DRAWING A LINE EXAMPLE
<script>
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
</script>

DRAWING ARCS
 To create an arc with HTML5 Canvas, we can use
the arc() method.
 Arcs are defined by:
 a center point,
 a radius,
 a starting angle,
 an ending angle, and
 the drawing direction (either clockwise or anticlockwise).
 Arcs can be styled with the lineWidth, strokeStyle,
and lineCap properties.

DRAWING ARCS EXAMPLE
<script>
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = 'black';
context.stroke();
</script>

DRAWING A RECTANGLE
 To create a rectangle using HTML5 Canvas, we can use
the rect() method rather than constructing the shape with 4
connecting lines.
 The rectangle is positioned with x and y parameters, and is sized
with width and height parameters.
 The rectangle is positioned about its top left corner.

DRAWING A RECTANGLE EXAMPLE
<script>
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.strokeStyle = 'black';
context.stroke();
</script>

DRAWING A CIRCLE
To draw a circle with HTML5 Canvas, you can create a
full arc using the arc() method by defining the starting
angle as 0 and the ending angle as 2 * PI.

DRAWING A CIRCLE EXAMPLE
<script>
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.strokeStyle = '#003300';
context.stroke();
</script>

DRAW A SEMI-CIRCLE
To create a semicircle with HTML5 Canvas, we can
create an arc using the arc() method and define the
ending angle has startAngle + PI.

DRAWING A SEMI-CIRCLE EXAMPLE
<script>
context.arc(288, 75, 70, 0, Math.PI, false);
context.closePath();
context.fillStyle = ‘red';
context.fill();
context.strokeStyle = '#550000';
context.stroke();
</script>

LINEAR GRADIENTS
To create a linear gradient with HTML5 Canvas, use
the createLinearGradient() method.
Linear gradients are defined by an imaginary line which
defines the direction of the gradient.
Insert colors using the addColorStop property.

RADIAL GRADIENTS
To create a radial gradient with HTML5 Canvas, use
the createRadialGradient() method.
Radial gradients are defined with two imaginary circles -
a starting circle and an ending circle, in which the
gradient starts with the start circle and moves towards
the end circle.

PATTERNS
 To create a pattern with the HTML5 Canvas, use
the createPattern() method of the canvas context which returns
a pattern object,
 Set the fillStyle property to the pattern object, and then fill the
shape using fill().
 The createPattern() method requires an image object and a
repeat option, which can be repeat, repeat-x, repeat-y, or no-
repeat.
 Unless otherwise specified, the repeat option is defaulted
to repeat.

IMAGES
 To draw an image using HTML5 Canvas, use
the drawImage() method which requires an image object and a
destination point.
 The destination point defines the top left corner of the image
relative to the top left corner of the canvas.
 Since the drawImage() method requires an image object, first
create an image and wait for it to load before
instantiating drawImage().
 This is accomplished by using the onload property of the image
object.

TEXT
 Use the font property and the fillText() method of the canvas
context.
 To set the font, size, and style of HTML5 Canvas text,
 set the font property of the canvas context to a string
containing the font style, size, and family, delimited by
spaces.
 The style can be normal, italic, or bold. unless otherwise
specified, the font style is defaulted to normal.
 Once the font property has been set, draw the text with
the fillText() method, which requires a string and an x and y
position.

Drawing with the HTML5 Canvas

More Related Content

What's hot

Viewers also liked

Similar to Drawing with the HTML5 Canvas

More from Henry Osborne

Recently uploaded

Drawing with the HTML5 Canvas