HTML5 Canvas

DrawImage

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <canvas id="c" width="200" height="200"></canvas>
    <script>
      var c = document.querySelector("#c");
      var ctx = c.getContext("2d");

      var image = new Image();

      image.onload = function() {
        console.log("Loaded image");
        ctx.drawImage(image, 0, 0, c.width, c.height);
        var saveImage = c.toDataURL();
        window.open(saveImage);
      }

      image.src = "meme.jpg";
    </script>
  </body>
</html>

Draw Shape

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <canvas id="c" width="500" height="500"></canvas>
    <script>
      var c = document.querySelector("#c");
      var ctx = c.getContext("2d");

      //ctx.fillRect(100, 100, 100, 100);
      ctx.strokeRect(50, 50, 100, 100);



      ctx.beginPath();
      ctx.moveTo(75, 75);
      ctx.lineTo(125, 125);
      ctx.lineTo(125, 75);
      // ctx.lineTo(75, 75);
      ctx.fill();
    </script>
  </body>
</html>

Manipulating drawing

Scaling
- scale(x, y) multiplies the x and y values by a given factor.
  - e.g. ctx.scale(2, 3); will make all values twice as large on the x axis and three times on the y axis
Translation
- translate(x, y) moves all subsequent draw commands by x number of pixels on horizontally and y pixels vertically.
  - e.g. ctx.translate(20, 40); moves all elements drawn after it 20 pixels to the right of 40 pixels down.
Rotation
- ctx.rotate(angleRadius) rotates an object a certain number of radians(generally) about its center. you probably may have learned about in school but here's a handy fomula to convert a value from degrees to radians.
- radians = degrees * (Math.PI/180)
Order of operation
- Scale, Rotate, Translate (in general)

Saving the State

The 'ctx.save()' can save the following values
The current transformation matrix (rotation, scaling, translation)

strokeStyle
fillStyle
font
globalAlpha
lineWidth
lineCap
lineJoin
miterLimit
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
globalCompositeOperation
textAlign
textBaseline
The current clipping region

var c = document.querySelector("#c");
var ctx = c.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(0,0,50,50);

// Save state with blue fill
ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(100,100,10,10);
// Restore to blue fill
ctx.restore();

ctx.fillRect(200,10,20,20);

Meme Maker (as a sample of drawing texts)

<!DOCTYPE html>

<html>
<head>
  <title>MemeMaker-Simple</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <style>
    #image-container {
      display: flex;
    }
  </style>
</head>

<body>

  <div>
    <input type="file" id="file" />
  </div>
  <div id="image-container">
    <canvas width="500" height="500"></canvas>
    <div>
      <span>Top Line:</span><br/>
      <input id="topLineText" type="text"><br/>
      <span>Bottom Line:</span><br/>
      <input id="bottomLineText" type="text"><br/>
      <button id="saveBtn">Save</button>
    </div>
  </div>
  <script>
    function textChangeListener (evt) {
      var id = evt.target.id;
      var text = evt.target.value;

      if (id == "topLineText") {
        window.topLineText = text;
      } else {
        window.bottomLineText = text;
      }

      redrawMeme(window.imageSrc, window.topLineText, window.bottomLineText);
    }

    function redrawMeme(image, topLine, bottomLine) {
      // Get Canvas2DContext
      var canvas = document.querySelector('canvas');
      var ctx = canvas.getContext("2d");
      // Your code here
      topLine = topLine || "";
      bottomLine = bottomLine || "";

      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

      ctx.font = "36pt Impact";
      ctx.textAlign = "center";
      ctx.fillStyle = "white";
      ctx.strokeStyle = "black";
      ctx.lineWidth = 3;

      ctx.fillText(topLine, canvas.width / 2, 100);
      ctx.strokeText(topLine, canvas.width / 2, 100);

      ctx.fillText(bottomLine, canvas.width / 2, canvas.height - 80);
      ctx.strokeText(bottomLine, canvas.width / 2, canvas.height - 80);
    }

    function saveFile() {
      window.open(document.querySelector('canvas').toDataURL());
    }

    function handleFileSelect(evt) {
      var canvasWidth = 500;
      var canvasHeight = 500;
      var file = evt.target.files[0];

      var reader = new FileReader();
      reader.onload = function(fileObject) {
        var data = fileObject.target.result;

        // Create an image object
        var image = new Image();
        image.onload = function() {

          window.imageSrc = this;
          redrawMeme(window.imageSrc, null, null);
        }

        // Set image data to background image.
        image.src = data;
        console.log(fileObject.target.result);
      };
      reader.readAsDataURL(file)
    }

    window.topLineText = "";
    window.bottomLineText = "";
    var input1 = document.getElementById('topLineText');
    var input2 = document.getElementById('bottomLineText');
    input1.oninput = textChangeListener;
    input2.oninput = textChangeListener;
    document.getElementById('file').addEventListener('change', handleFileSelect, false);
    document.querySelector('button').addEventListener('click', saveFile, false);
  </script>

</body>
</html>

Gray Scale

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <canvas id="c" width="200" height="200"></canvas>
    <script>
      var c = document.querySelector("#c");
      var ctx = c.getContext("2d");

      var image = new Image();
      var input;

      image.onload = function() {
        console.log("Loaded image");
        ctx.drawImage(image, 0, 0, c.width, c.height);
        input = ctx.getImageData(0, 0, c.width, c.height);

        grayScale(input);
        ctx.putImageData(input, 0, 0);
      }
      image.src = "meme.jpg";

      function grayScale(imageData) {
        var data = imageData.data;
        var gray = 0;
        var numPixels = data.length / 4;
        console.log("numPixels: " + numPixels);
        for (var i = 0, j = 0; i < numPixels; i++) {
          j = i * 4;
          gray = calcGray(data[j], data[j+1], data[j+2]);
          data[j] = gray;
          data[j+1] = gray;
          data[j+2] = gray;

          if (j % 100 === 0) {
            console.log(j);
          }
        }
      };

      function calcGray(r, g, b, a) {
        return (r * 0.3) + (g * 0.59) + (b * 0.11)
      };
    </script>
  </body>
</html>

kkas/new_gist_file.md

HTML5 Canvas

DrawImage

Draw Shape

Manipulating drawing

Saving the State

Meme Maker (as a sample of drawing texts)

Gray Scale