canvas.md

CANVAS

What is it?

• Canvas was added in HTML5
• Used to draw stuff via scripting in JavaScript
• 'Stuff' => Graphs, photo compositions, animations, or real-time video processing

How to Use Canvas

• Start by creating the canvas element on the HTML with an id

  <canvas id="canvas"></canvas>

• Then in Javascript, describe the behavior you want the canvas to embody

  var canvas = document.getElementById("canvas"); 
  var ctx = canvas.getContext("2d");
    
    ctx.fillStyle = "green";  
    ctx.fillRect(10, 10, 100, 100);

• Always start by selecting the 'canvas' by the id name you gave it
• Define the ctx (context) of the canvas -Multiple contexts available - webg1, webg12, bitmaprenderer -Webg1 & Webg12 creates object representing 3D -Bitmaprenderer creates ImageBitMap context which replaces content of canvas with a given bitmap

Resources

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