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!"
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
