Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind HTML Canvas?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___ xArray = [50,60,70,80,90,100,110,120,130,140,150];3Order
Put the learning moves in the order that makes the concept easiest to apply.
HTML Canvas is perfect for combining Scatter and Lines
HTML Canvas is perfect for Line Graphs
HTML Canvas is perfect for Scatter Plots
HTML Canvas is perfect for Scatter Plots
HTML Canvas is perfect for Line Graphs
HTML Canvas is perfect for combining Scatter and Lines
Scatter Plots
Source Code
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Plot Scatter ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
let x = xArray[i]*400/150;
let y = yArray[i]*400/15;
ctx.beginPath();
ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
ctx.fill();
}Line Graphs
Source Code
let xMax = canvas.height;
let slope = 1.2;
let intercept = 70;
// Plot Scatter ctx.moveTo(0, intercept); ctx.lineTo(xMax, f(xMax)); ctx.strokeStyle = "black"; ctx.stroke(); // Line Function function f(x) {
return x * slope + intercept;
}Combined
Source Code
let xMax = canvas.height;
let yMax = canvas.width;
let slope = 1.2;
let intercept = 70;
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Plot Scatter ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
let x = xArray[i]*400/150;
let y = yArray[i]*400/15;
ctx.beginPath();
ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
ctx.fill();
}
// Plot Line ctx.moveTo(0, intercept); ctx.lineTo(xMax, f(xMax)); ctx.strokeStyle = "black"; ctx.stroke(); // Line Function function f(x) {
return x * slope + intercept;
}