HTML5 Canvas

Question 1

Why does an image get rotated around the 0,0 canvas origin, instead of it’s own center?

Answer 1

Because you must first translate the canvas’s origin to the center of the object you wish to rotate.

Question 2

Once the origin has been translated to the center of the object, what is the next step you need to do when drawing the object?

Answer 2

You have to subtract half of the width and the height to account for the translation of the canvas’s origin.

Question 3

What functions are used to push / pop the context’s state before transforms?

Answer 3

context. save

context. restore

Question 4

What function do you use to get the next animation frame (i.e. update the update method)?

Answer 4

window.requestAnimationFrame()

Question 5

window.requestAnimationFrame requires a callback function, how do you deal with the this variable, if the callback is a member of this object?

Answer 5

Use bind to set the value of this within the callback.

window.requestAnimationFrame(this.update.bind(this));

Question 6

The update method, once called by window.requestAnimationFrame, will need to call itself to maintain the loop, how do you set this up?

Answer 6

update: function () {
…
window.requestAnimationFrame(this.update.bind(this));
},

start: function () {
window.requestAnimationFrame(this.update.bind(this));
}

Question 7

If you want to rotate an object so it faces a second object, what function would you use to determine it’s required angle of rotation?

Answer 7

var dx = bx - ax;
var dy = by - ay;
var angle = Math.atan2(dx, dy);

Question 8

How would you set the identity matrix before performing a transform?

Answer 8

context.setTransform(1, 0, 0, 1, 0, 0);

Question 9

How would you create a smooth up and down movement of an object - from it’s starting point, to +/- 100 units from that point?

Answer 9

Use a sine expression. Set the ‘angle’ to 0. And then use

yPos = objectInitialPos.y + Math.sin(angle) * 100;
angle += 0.1;

This will make the y value bounce between -100 and 100 above and below the starting point.

NOTE: Angle is analogous with speed

angle += 0.5 would be five times faster than the above example.

Question 10

What is the canvas resolution mapped too?

Answer 10

CSS Pixels

Question 11

What is the gotcha with CSS pixels and hi-rez screens?

Answer 11

It’s possible that a high rez screen will map multiple of it’s pixels, to a single CSS pixel.

Question 12

Why does using CSS to resize a canvas not work?

Answer 12

It works like an image - so just setting the width (say 100%) will resize the image, and maintain the aspect ratio by automatically calculating the height.

But if you set both width and height in CSS, it will set the aspect ratio as per the new values, stretching the image.

If there are no values set on the element itself, it uses some default values.

This results in a stretched image.

Question 13

Describe a canvas…

Answer 13

A resolution dependent canvas, that draws bitmap data on the ‘fly’.

Question 14

What API is used for drawing shapes?

Answer 14

the SVG api. Scalable Vector Graphics.

Question 15

Can you attach an event handler on a raw SVG element on a canvas?

Answer 15

No - there is no associated DOM element, so no you cannot.

Question 16

When using canvas - which is best, CSS or DOM animation?

Answer 16

CSS - as it’s probably done on the GPU, DOM manipulation (and hence animation) is very expensive.

Question 17

What is wrong with the following code?

c. beginPath();
c. moveTo(100, 100);
c. lineTo(400, 400);
c. stroke();
c. endPath();

Answer 17

There is no such function as c.endPath

Question 18

What is the tag used to create a web gl context?

Answer 18

canvas.getContext(‘webgl’);

Question 19

If webgl doesn’t work - what can we do?

Answer 19

Fall back to experimental.

gl = canvas.getContext(“webgl”) || canvas.getContext(“experimental-webgl”);

Question 20

How do you draw a straight line?

Answer 20

c. beginPath();
c. moveTo(100, 100);
c. lineTo(400, 400);
c. stroke();

Question 21

What does closePath do?

Answer 21

If you have a number of line segments (sub paths) within a line - calling closePath will close the shape.

c. beginPath();
c. moveTo(50, 50);
c. lineTo(100, 250);
c. lineTo(400, 250);
c. lineTo(600, 50);
c. closePath();
c. stroke();

Question 22

What constitutes a sub path within a path?

Answer 22

Any separate line within a beginPath and strokePath set.

Keep in mind - if you close a shape, that’s whole shape is a single sub path, any subsequent drawing of lines within that path, even if it joins from the last point on that sub path, constitutes a new subpath.

Question 23

if you use moveTo when drawing lines - does the path become broken?

Answer 23

There will be a gap, but it’s a legitimate path.

Question 24

Does ‘closePath’ actually close the path?

Answer 24

No - in fact it only closes the current subpath, and it starts a new subpath from the point where it is ended.

Question 25

What is wwrong with the following code?

c. beginPath();
c. moveTo(100, 100);
c. lineTo(400, 400);
c. lineTo(100, 400);
c. closePath();
c. beginPath();
c. lineTo(350, 100);
c. stroke();

Answer 25

Because the c.beginPath is called prior to c.stroke, nothing will draw. Secondly, the second subpath won’t draw because there was not start position.

Question 26

What is the current default path?

Answer 26

The current subpath that follows the beginPath call. The context only keeps track of one subpath, so any calls to beginPath before stroke is called will kill the current subpath, and create a new default subpath.

Question 27

What is the issue with the following bit of code?

c. beginPath();
c. moveTo(100, 100);
c. lineTo(100, 400);
c. lineWidth = 41;
c. stroke();

Answer 27

Because the linewidth is spread across the center line of a line - the number 41 will cause blurring as the edges of the line are not on the grid.

Question 28

What is the default lineCap?

Answer 28

‘butt’

Question 29

How do you make a linecap rounded?

Answer 29

c.lineCap = ‘round’

Question 30

What is the radius of a round linecap?

Answer 30

half the thickness of the width of the line

Question 31

What does lineCap = ‘square’ do?

Answer 31

Adds a square to the top of the line - that is the same width and height as the line’s width. (basically makes it taller)

Question 32

What is the default c.lineJoin?

Answer 32

miter

Question 33

What kind of lineJoin’s can we use?

Answer 33

miter, round, bevel

Question 34

Can you fill an unclosed path?

Answer 34

Yes - the default colour is blakc.

Question 35

How would you set the stroke color of a path?

Answer 35

c.strokeStyle = ‘rgb(255, 255, 0)’;

Question 36

How would you set the fill colour of a path?

Answer 36

c.fillStyle = ‘rgb(255, 255, 0)’;

note - it’s in a string, and you can use rgba, hsl and hsla

Question 37

How do you draw a filled rectangle in canvas?

Answer 37

c. beginPath()
c. fillStyle = ‘hsl(50, 100%, 50%)’;
c. fillRect(100, 100, 24, 24);

Question 38

How do you draw a stroked rectangle in canvas

Answer 38

c. beginPath()
c. strokeStyle = ‘hsl(50, 100%, 50%)’;
c. strokeRect(100, 100, 24, 24);

Question 39

How do you clear a section of the canvas of all pixels?

Answer 39

c.clearRect(0, 0, 10, 10);

Question 40

Does using any rectangle drawing function affect the current default path?

Answer 40

No - you can draw a line and stroke it - then draw a bunch of squares - if you draw another line segment (using lineTo and stroke) it will continue from where the line left off.

Question 41

How does an arc work?

Answer 41

context.arc(x, y, radius, startangle, endangle, [anticlockwise])

Question 42

How would you draw a circle using the arc function?

Answer 42

c. beginPath();
c. arc(50, 50, 18, 0, Math.PI * 2, false);
c. strokeStyle = ‘hsl(40, 100%, 50%)’;
c. lineWidth = 3;
c. lineCap = ‘round’;
c. stroke();

NOTE: Math.PI * 2 - gives a full circle in radians

Question 43

What is the difference between strokeRect, fillRect and rect?

Answer 43

strokeRect/fillRect will draw immediately to the canvas - and is not part of a path.

Rect on the other hand requires a beginPath() call - and is part of the path, allowing it to become part of other shapes.

Question 44

How do you reset a translation?

Answer 44

There are technically two methods:

context. save()
context. restore()

OR

context.setTransform(1, 0, 0, 1, 0, 0);

Question 45

Is a translation cumalitive?

Answer 45

Yes - if you apply
context.translate(400, 400);
// then
context.translate(400, 400);
The origin will now be at 800, 800

Question 46

How do you translate the origin before drawing?

Answer 46

context.translate(400, 400);

This will give you the ability to use atan2 in a polar sense, with the origin in the middle of the page.

Question 47

What do you have to keep in mind with results from atan2?

Answer 47

The range is between [-π, π] - which means you don’t know the 360 value. To change this, (assuming radians)…

if (angle

Question 48

What happens when you apply a scale transform?

Answer 48

c.scale(2, 2);

It’s not actually scalling the image - rather it’s scaling the coordinates, so 2 in the x direction means, 1 pixel is now represented by 2 pixels.

Question 49

How do you create and use a linear gradient?

Answer 49

// Assume c is our context
var lg = c.createLinearGradient(0, 0, 800, 0);
// You need to add the colors to lg
lg.addColorStop(0, 'rgb(200, 100, 23)');
lg.addColorStop(0.5, 'rgb(3, 3, 43)');
c.fillStyle = lg; // Assign the gradient
c.beginPath();
c.fillRect(0, 0, 800, 800);

NOTE: that the first parameter to addColorStop is the index for where the gradient begins - it’s a value between 0 - 1

Question 50

When you create a linear gradient, but it’s less than the width of the object you are filling, what happens?

Answer 50

The gradient stops, and the last colour drawn is repeated.

NOTE: This means gradients don’t fill the object, they are essentially ‘under’ the object.

Question 51

Can you use a gradient on the stroke?

Answer 51

Yes. It’s exactly the same as using it on the fill - but you just call stroke.

Question 52

What is the global alpha?

Answer 52

It’s a value that determines how transparent everything is.

c.globalAlpha = 0.5; // 50% transparency

Question 53

How do you prevent things from being drawn with the same alpha later on?

Answer 53

You can do the alpha between a ‘save / restore’ pair.