Digital Tech and Innovations Canvas Tag Test

Question 1

What is the canvas tag

Answer 1

The canvas elects provides web pages with a place where they can draw free-form graphics of all kinds

Question 2

How does the canvas coordinate system work

Answer 2

• starts in the upper left corner of the canvas
• ## increasing values going from left to right on x axis and top to bottom on y axis

Question 3

how does the canvas id work

Answer 3

• you have to declare your canvas with a “canvas id” because you will be accessing it from script

Question 4

What attributes does the canvas tag declare

Answer 4

width, height, style (solid border), thickness, colour

Question 5

Write a canvas tag

Answer 5

<canvas id=”myCanvas” width=”800” height=”600” style=”border:1px solid black”;></canvas>

Question 6

What two things do you need to draw on the canvas

Answer 6

• Retrieve a reference to the canvas element
• get the drawing context from the element using getContext

var canvas = document.getElementById(“myCanvas”)

var dt = canvas.getContext(“2d”)

Question 7

What is an API

Answer 7

application programming interface

allows us to draw shapes, text etc

Question 8

how do you set a fill colour to something

Answer 8

dt.fillStyle = “rgba()”
dt.fillStyle = “green”
dt.fillStyle = “#fA918t”
dt.fillStyle = colour1

Question 9

How do you draw a square/rectangle

Answer 9

dt.fillRect

Question 10

What do the coordinates in fillRect mean

Answer 10

(x, y, width, height)

starting x and y coordinates from the top left, width and height of the rectangle

Question 11

How do you declare the width of a line

Answer 11

dt.lineWidth =

Question 12

What does strokeRect do?

Answer 12

• it outlines the outside of your rectangle
• it uses the same coordinates and ways as fillRect of the rectangle

Question 13

How do you declare the colour of the outline your shape

Answer 13

dt.strokeStyle =

Question 14

how do you draw a rectangle with only an outline

Answer 14

dt.strokeStyle - outline colour
dt.lineWidth - width in px
dt.strokeRect - drawing the rectangle (same coordinates as usual)

Question 15

How do you draw a fully filled rectangle

Answer 15

dt.fillStyle - fill colour
dt.fillRect - drawing it, same coordinates

Question 16

How do you draw a stroked and full rectangle

Answer 16

dt.strokeStyle
dt.fillStyle
dt.lineWidth
dt.fillRect
dt.strokeRect

Question 17

what is a clear rectangle, how do you draw it, and what can you use it for

Answer 17

• a rectangle that removes/notches out any other drawn object underneath
• dt.clearRect(x, y, width, length)
• you can use this in a function to removes the “trails” of your other movements

Question 18

How do you draw a simple line

Answer 18

drawingTools.beginPath();
drawingTools.lineWidth = 1;
drawingTools.moveTo(0, 0);
drawingTools.lineTo(500, 200);
drawingTools.stroke();

Question 19

What are the three different line caps and what do you code for them?

Answer 19

butt, round, square

dt.lineCap = “butt” (round or square)

Question 20

What do the three line caps look like

Answer 20

butt: it appears square, but it is different because in this the stroke symbol will end exactly where the Line geometry ends
round: rounded edges and ends
square: looks square, and like butt, though the square caps will extend past the endpoint of the line and don’t end exactly at the coordinates

Question 21

What is a lineJoin

Answer 21

the shape/common area that is formed when two lines join

Question 22

what are the different line joins and how do you write them

Answer 22

dt.lineJoin = “round”
dt.lineJoin = “bevel”
dt.lineJoin = “miter”

Question 23

what do the three linejoines look like

Answer 23

round: rounded edges
bevel: where it connects is a flat, like the tip is cut
miter: pointy edge

Question 24

How do you draw an arc

Answer 24

dt.arc(x, y, r, sA, eA, aC);

Question 25

What do the numbers in arc mean

Answer 25

x, y - centre of the circle
r - radius
sA - starting angle
eA - ending angle
aC - direction of the path, anti clockwise is true and clockwise is false, this also shows if you want the circle to go fully around or half.

Question 26

How do you switch the direction the arc is going?

Answer 26

change the 4th number in the brackets and * it by Math.PI

Question 27

How do you draw a Bézier curve

Answer 27

strokestyle, linewidth
dt.beginPath();
dt.moveTo(20, 20); - beginning point of the line
dt.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
dt.stroke();

Question 28

What do you write for a Bézier curve and what do the numbers mean

Answer 28

dt.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

cp1x and y- control point 1, the coordinates where you want it to curve towards
cp2x and y - control pt 2, the coordinates where you want it to curve towards
x, y - the last point where the curve will end

Question 29

How do you draw quadratic curve

Answer 29

strokestyle, linewidth

dt.beginPath()
dt.moveTo(beginning x,y)
dt.quadraticCurveTo(cpx, cpy, x, y)
dt.stroke();

Question 30

What do you write for a quadratic curve and what do the numbers mean

Answer 30

cpx, cpy- control point 1 coordinates

x, y - end points of line

Question 31

what’s the difference between a Bézier curve and a quadratic curve

Answer 31

Bézier curves are more nicely rounded because they have two control points while quadratic curves only have one

Question 32

What does this code do?

for(var i = 0; i < 640; i += 10)
{
drawingTools.beginPath();
drawingTools.moveTo(i, 0);
drawingTools.lineTo(i, 480);
drawingTools.stroke();
}

Answer 32

I is = to 0, if I < 640, add 10 to i.

the curly brackets are drawing a line starting at I,0 and ending at I by 480. Ultimately drawing lines going from the top of the screen to the bottom, moving 10 right each time.

Question 33

What does this code do?

for(var i = 0; i < 480; i += 10)
	{
		dt.beginPath();
		dt.moveTo(0, i);
		dt.lineTo(640, i);
		dt.stroke();
	}

Answer 33

I is = to 0, if I < 480, add 10 to i.

the curly brackets are drawing a line starting at 0, 480 and ending at 640 by i. Ultimately drawing lines going from left to right on the screen, moving 10 down each time.

Question 34

What does this code do

for(var i = 0; i < 640; i += 2)
{
dt.beginPath();
dt.moveTo(i, 0);
dt.lineTo(Math.floor(Math.random() * 640), canvas.height);
dt.stroke();
}

Answer 34

every time it runs the conditional it creates a line. It adds 2 to the x coordinate each time, and randomizes the y. Creating a random line

Question 35

What do you need to do for a function

Answer 35

• function calls
• changing the coordinates to x and y pos
• changing colours

Question 36

Mouse move function

Answer 36

• add a document.eventListener(“mousemove”, function)

ex drawing a line that you want to move to where the mouse is
- use event.clientX and y in your lineTo (the client is your mouse so this is the coordinates of the mouse)
- this will draw your line to where your mouse is

ex moving a circle where your mouse is
- make the origin coordinates event.clientX, event.clientY

Question 37

How to make a linear gradient

Answer 37

var linGrd = dt.createLinearGradient(x, y, x, y)
- x, y starting points and x,y ending points of gradient

linGrd.addColourStop(0,”red”)
linGrd.addColourStop(1, “green”)

• 0 will be the first part where the red is, and green is the final part (you can add more in-between)

Question 38

how do I fill something with the gradient

Answer 38

dt.fillStyle = linGrd;
dt.fillStyle = radGrd;

Question 39

How do you create a radial gradient

Answer 39

dt.createRadialGradient(x1, y1, r1, x2, y2, r2)

xy1 - xy coordinates of the centre of the staring circle
r1 - radius of the starting circle
xy2 - xy coordinates of the centre of the second circle
r2 - radius of the second circle

• radial gradients are made with two circles

dt.addColorStop(0, colour)
dt.addColorStop(1, colour)

//adding colour stops

Question 40

How do you create multiple canvas’

Answer 40

canvas 1: draw everything as normal, then after the style write position: absolute; left: 0; top: 0; z-index: 0; (can be any numbers)

• this gives it a position of 0 px from the left and top of the browser window, and a z index of 0 so its the lowest on the stacking order

<canvas></canvas>

Question 41

How would I make 20 flowers appear on the screen in different spots with different colours

Answer 41

• function to draw the flower
• function for the random colour
  red * math.random, green math.random etc. It will use the rub values and multiply it by them so you can get a new value each time ultimately changing the colour
• and function to generate the flowers into random spots
  In this function you are going to add clear rect, then call the function in it. * 640 and 480 by math.random in the function call so we can generate random spots, then add the colour

Question 42

what does this code show

	x = x + speed; // x coordinate, plus speed, it will move 5 (speed) to the right until its done 

	// ex : x + 5 = 25 + 5 = 30 + 5 = 35;

	if(x < 0 || x > 740) // so it wont start regenerating randomly
	{
		y = Math.floor(Math.random()*canvas2.height);
		x = 0;
	}

}

Answer 42

• its showing a car that is moving along th e screen and reappearing and different y coordinates, it is moving 5 spaces right every 30 milleseconds

Question 43

How do you draw text on a canvas

Answer 43

define a variable

var theText = “Drawing Text on a Canvas”

dt.filltext(what your writing, x, y) - coordinates

Question 44

font info

Answer 44

dt.font = “25pt Georgia”

Question 45

fill colour

Answer 45

dt.fillStyle = “blue”

Question 46

adding a stroke to the line

Answer 46

dt.strokeStyle=”red”

Question 47

drawing a line under text

Answer 47

// use measureText to draw a line under the text
var textW = dt.measureText(theText);
dt.beginPath();
dt.strokeStyle=”black”;
dt.moveTo(20,170);
dt.lineTo(textW.width,170);
dt.stroke();