Information designer. Environment, science, tech & culture. Carbon-neutral. "Move quietly and plant things."
Published
Edited
Oct 27, 2020
15 stars
myCanvas = html`<canvas id="myCanvas" width="150", height="150"></canvas>`
myCanvas2 = html`<canvas id="myCanvas2" width="150", height = "150" style="border:1px solid #000000; background-color: steelblue;"></canvas>`
example = html`
<canvas id="example" width="150" height="150">
This text only displays in unsupported browsers.
</canvas>`
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!";
}
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!";
}
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!";
}
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!";
}
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!"
}
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!"
}
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!"
}
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!"
}
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.