Intro to HTML5 Canvas, Øredev 2018

animation.html

<style>
body {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
}
</style>
<canvas id='painting' width=740 height=740></canvas>
<script src="d3.v4.js"></script>
<script>
var canvas = document.getElementById('painting')
var context = canvas.getContext('2d')

// center the animation
context.translate(canvas.width/2, canvas.height/2)

d3.timer(function(t) {
  context.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height)

  var x = Math.cos(t / 2000 * Math.PI) * 120
  var y = Math.sin(t / 2000 * Math.PI) * 120
  var color = "hsl(" + (Math.floor(t/30) % 360) + ",80%,60%)"

  circle(x,y,40,color)
})

function circle(x,y,radius,color) {
  context.fillStyle = color
  context.beginPath()
  context.arc(x,y,radius,0,2*Math.PI)
  context.fill()
}
</script>

barchart.html

<canvas id='painting' width=120 height=500></canvas>
<script>

var canvas = document.getElementById('painting')
var context = canvas.getContext('2d')

var data = [1, 1, 2, 3, 5, 8, 13, 21, 34]

context.fillStyle = "#f5b"
data.forEach(drawBar)

function drawBar(d,i) {
  var x = 12*i;
  var y = 200;
  var width = 10;
  var height = -5*d;
  context.fillRect(x,y,width,height);
}
</script>

barchart.png

boids.gif

bubbles-dark.gif

bubbles.gif

caniuse.png

canvas-animation-2.gif

canvas-animation.gif

choro.png

circs.png

color-wheels.html

compositing-2.html

compositing.html

d3.v4.js

exoplanets.png

eye-brain.jpg

eye-cells.jpg

hidden-canvas-method.gif

index.html

infant-mortality.png

julia.png

lines-closed.png

lines-filled.png

lines.html

lines.png

monitor-big-dark.png

monitor-big.png

monitor-small.jpg

multiply.gif

nyt-wind.gif

rects.png

remark-latest.min.js

science-sats.gif

screen.gif

source-over.gif

thumbnail.png

trails-neon.gif

trails-neon.html

trails.gif

trails.html