 Source: cirosantilli/html-canvas

= HTML canvas
{c}

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Allows us to draw with JavaScript pixel by pixel! Great way to create <computational physics> demos!

Here is an animation demo with some useful controls:
\JsCanvasDemo[
new class extends OurbigbookCanvasDemo \{\
  init() \{\
    super.init('hello');\
    this.pixel_size_input = this.addInputAfterEnable(\
      'Pixel size',\
      \{\
        'min': 1,\
        'type': 'number',\
        'value': 1,\
      \}\
    );\
  \}\
  draw() \{\
    var pixel_size = parseInt(this.pixel_size_input.value);\
    for (var x = 0; x \< this.width; x += pixel_size) \{\
      for (var y = 0; y \< this.height; y += pixel_size) \{\
        var b = ((1.0 + Math.sin(this.time * Math.PI / 16)) / 2.0);\
        this.ctx.fillStyle =\
          'rgba(' +\
          (x / this.width) * 255 + ',' +\
          (y / this.height) * 255 + ',' +\
          b * 255 +\
          ',255)'\
        ;\
        this.ctx.fillRect(x, y, pixel_size, pixel_size);\
      \}\
    \}\
  \}\
\}
]

Bibliography: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

 Back to article page