Published
Edited
Oct 27, 2020
15 stars
Insert cell
Insert cell
Insert cell
myCanvas = html`<canvas id="myCanvas" width="150", height="150"></canvas>`
Insert cell
Insert cell
myCanvas2 = html`<canvas id="myCanvas2" width="150", height = "150" style="border:1px solid #000000; background-color: steelblue;"></canvas>`
Insert cell
Insert cell
example = html`
<canvas id="example" width="150" height="150">
This text only displays in unsupported browsers.
</canvas>`
Insert cell
Insert cell
exampleGrab = {example;
// This first line grabs the DOM node representing the canvas.
var canvas = document.getElementById(example.id);
// This second line accesses the drawing context. You can use whatever names you want for the variables.
var ctx = canvas.getContext('2d');
// You could also chain the methods together if you wanted to:
var canvas2 = document.getElementById('example').getContext('2d');
return "Canvas grabbed!";
}
Insert cell
Insert cell
Insert cell
Insert cell
exampleRectangles = {rectangle;
var canvas = document.getElementById(rectangle.id).getContext('2d');
canvas.fillRect(25, 25, 100, 100); // Draw a filled rectangle
canvas.clearRect(45, 45, 60, 60); // Cut out a rectangular chunk from the middle
canvas.strokeRect(50, 50, 50, 50); // Draw an outline inside it
return "Rectangles drawn!";
}
Insert cell
Insert cell
Insert cell
exampleTriangle = {triangle;
var canvas = document.getElementById(triangle.id).getContext("2d");
canvas.beginPath(); // This begins the path
canvas.moveTo(75, 50); // Move the cursor without adding to the path
canvas.lineTo(100, 75); // Add a line to the path
canvas.lineTo(100, 25); // Add a line to the path
canvas.fill(); // Fill the path, automatically closing it
return "Triangle drawn!";
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
exampleArcs = {arcs;
var canvas = document.getElementById(arcs.id).getContext("2d");
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
canvas.beginPath();
var x = 25 + j * 50 // x-coordinate
var y = 25 + i * 50 // y-coordinate
var radius = 20; // arc radius
var startAngle = 0; // circle starting angle
var endAngle = Math.PI + (Math.PI * j) / 2 // circle ending angle
var anticlockwise = i % 2 !== 0 // clockwise or anticlockwise
canvas.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i > 1) {canvas.fill();}
else {canvas.stroke();}
}
}
return "Arcs drawn!";
}
Insert cell
Insert cell
Insert cell
Insert cell
exampleQuadratic = {quadratic;
var canvas = document.getElementById(quadratic.id).getContext("2d");
// It's curve time
canvas.beginPath();
canvas.moveTo(75, 25);
canvas.quadraticCurveTo(25, 25, 25, 62.5);
canvas.quadraticCurveTo(25, 100, 50, 100);
canvas.quadraticCurveTo(50, 120, 30, 125);
canvas.quadraticCurveTo(60, 120, 65, 100);
canvas.quadraticCurveTo(125, 100, 125, 62.5);
canvas.quadraticCurveTo(125, 25, 75, 25);
canvas.stroke();
return "Quadratic curves drawn!"
}
Insert cell
Insert cell
exampleCubic = {cubic;
var canvas = document.getElementById(cubic.id).getContext("2d");
// It's curve time
canvas.beginPath();
canvas.moveTo(75, 40);
canvas.bezierCurveTo(75, 37, 70, 25, 50, 25);
canvas.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
canvas.bezierCurveTo(20, 80, 40, 102, 75, 120);
canvas.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
canvas.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
canvas.bezierCurveTo(85, 25, 75, 37, 75, 40);
canvas.fill();
return "Cubic curves drawn!"
}
Insert cell
Insert cell
Insert cell
Insert cell
examplePath2D = {
var canvas = document.getElementById(path2D.id).getContext("2d");
// Create a rectangle
var rectangle = new Path2D();
rectangle.rect(10, 10, 50, 50);
// Create a circle
var circle = new Path2D();
circle.moveTo(125, 35);
circle.arc(100, 35, 25, 0, 2 * Math.PI);
// Render them
canvas.stroke(rectangle);
canvas.fill(circle);
return "Paths drawn!"
}
Insert cell
Insert cell
Insert cell
exampleSvgPaths = {svgPaths;
var canvas = document.getElementById(svgPaths.id).getContext("2d");
// Import SVG path data as a string
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
// Render it
canvas.stroke(p);
return "SVG Path drawn!"
}
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more