Digital Tech and Innovations Canvas Tag Test Flashcards
What is the canvas tag
The canvas elects provides web pages with a place where they can draw free-form graphics of all kinds
How does the canvas coordinate system work
- 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
how does the canvas id work
- you have to declare your canvas with a “canvas id” because you will be accessing it from script
What attributes does the canvas tag declare
width, height, style (solid border), thickness, colour
Write a canvas tag
<canvas id=”myCanvas” width=”800” height=”600” style=”border:1px solid black”;></canvas>
What two things do you need to draw on the canvas
- 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”)
What is an API
application programming interface
allows us to draw shapes, text etc
how do you set a fill colour to something
dt.fillStyle = “rgba()”
dt.fillStyle = “green”
dt.fillStyle = “#fA918t”
dt.fillStyle = colour1
How do you draw a square/rectangle
dt.fillRect
What do the coordinates in fillRect mean
(x, y, width, height)
starting x and y coordinates from the top left, width and height of the rectangle
How do you declare the width of a line
dt.lineWidth =
What does strokeRect do?
- it outlines the outside of your rectangle
- it uses the same coordinates and ways as fillRect of the rectangle
How do you declare the colour of the outline your shape
dt.strokeStyle =
how do you draw a rectangle with only an outline
dt.strokeStyle - outline colour
dt.lineWidth - width in px
dt.strokeRect - drawing the rectangle (same coordinates as usual)
How do you draw a fully filled rectangle
dt.fillStyle - fill colour
dt.fillRect - drawing it, same coordinates
How do you draw a stroked and full rectangle
dt.strokeStyle
dt.fillStyle
dt.lineWidth
dt.fillRect
dt.strokeRect
what is a clear rectangle, how do you draw it, and what can you use it for
- 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
How do you draw a simple line
drawingTools.beginPath();
drawingTools.lineWidth = 1;
drawingTools.moveTo(0, 0);
drawingTools.lineTo(500, 200);
drawingTools.stroke();
What are the three different line caps and what do you code for them?
butt, round, square
dt.lineCap = “butt” (round or square)
What do the three line caps look like
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
What is a lineJoin
the shape/common area that is formed when two lines join
what are the different line joins and how do you write them
dt.lineJoin = “round”
dt.lineJoin = “bevel”
dt.lineJoin = “miter”
what do the three linejoines look like
round: rounded edges
bevel: where it connects is a flat, like the tip is cut
miter: pointy edge
How do you draw an arc
dt.arc(x, y, r, sA, eA, aC);
What do the numbers in arc mean
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.
How do you switch the direction the arc is going?
change the 4th number in the brackets and * it by Math.PI
How do you draw a Bézier curve
strokestyle, linewidth
dt.beginPath();
dt.moveTo(20, 20); - beginning point of the line
dt.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
dt.stroke();
What do you write for a Bézier curve and what do the numbers mean
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
How do you draw quadratic curve
strokestyle, linewidth
dt.beginPath()
dt.moveTo(beginning x,y)
dt.quadraticCurveTo(cpx, cpy, x, y)
dt.stroke();
What do you write for a quadratic curve and what do the numbers mean
cpx, cpy- control point 1 coordinates
x, y - end points of line
what’s the difference between a Bézier curve and a quadratic curve
Bézier curves are more nicely rounded because they have two control points while quadratic curves only have one
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();
}
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.
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();
}
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.
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();
}
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
What do you need to do for a function
- function calls
- changing the coordinates to x and y pos
- changing colours
Mouse move function
- 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
How to make a linear gradient
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)
how do I fill something with the gradient
dt.fillStyle = linGrd;
dt.fillStyle = radGrd;
How do you create a radial gradient
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
How do you create multiple canvas’
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>
How would I make 20 flowers appear on the screen in different spots with different colours
- 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
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;
}
}
- 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
How do you draw text on a canvas
define a variable
var theText = “Drawing Text on a Canvas”
dt.filltext(what your writing, x, y) - coordinates
font info
dt.font = “25pt Georgia”
fill colour
dt.fillStyle = “blue”
adding a stroke to the line
dt.strokeStyle=”red”
drawing a line under text
// 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();
