i4THA

DRAW ON THE CANVAS WITH JAVASCRIPT
----------------------------------

Hello, World: hello.html

  <!DOCTYPE html>
  <html>
    <body>
      <canvas id="canvas" width="200" height="100"
      style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
      </canvas>

      <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.font = "30px Arial";
        context.fillText("Hello World",10,50);
      </script>
    </body>
  </html>

All drawing on the HTML canvas must be done with JavaScript: rect.html

  <!DOCTYPE html>
  <html>
    <body>
    <canvas id="canvas" width="200" height="150"
            style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      context.fillStyle = "#FF0000";
      context.fillRect(20,20,160,110);
    </script>
    </body>
  </html>

Draw a line: line.html
......................

  <!DOCTYPE html>
  <html>
    <body>
    <canvas id="canvas" width="200" height="150"
            style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
      context.moveTo(0,0);
      context.lineTo(200,100);
      // set line color
      context.strokeStyle = '#ff0000';
      context.stroke();
    </script>
    </body>
  </html>

Draw a circle: circ.html
........................

  <!DOCTYPE html>
  <html>
    <body>
    <canvas id="canvas" width="200" height="150"
            style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
      context.strokeStyle = '#00ff00';
      context.lineWidth = 10;
      context.beginPath();
      // context.arc(x,y,r,sAngle,eAngle,counterclockwise);
      // optional counterclockwise true | false
      context.arc(100,75,40,0,2*Math.PI);
      context.stroke();
    </script>
    </body>
  </html>

Draw an image: img.html
.......................

  <!DOCTYPE html>
  <html>
    <body>
      <img id="board" width="360" height="360"
           src="image/brd320x320.png" alt="Chess Board"
           style="display: none;">
      <img id="piece" width="40" height="40"
           src="image/bpawn.png" alt="Chess Piece"
           style="display: none;">
      <canvas id="canvas" width="360" height="360"
        style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
      <script>
        window.onload = function() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var pc = document.getElementById("piece");
            var brd = document.getElementById("board");
            context.drawImage(brd, 0, 0);
            for(x=0;x<8;x++)
                for(y=0;y<8;y++)
                    context.drawImage(pc,20+40*x,20+40*y);
        };
      </script>
    </body>
  </html>

Animate: anim.html
..................

  https://www.w3schools.com/graphics/canvas_clock_start.asp

  https://www.w3schools.com/graphics/game_movement.asp

  https://stackoverflow.com/questions/23939588
    /how-to-animate-drawing-lines-on-canvas

  <!DOCTYPE html>
  <html>
    <head>
      <style>
      canvas {
          border:1px solid #d3d3d3;
      }
      </style>
    </head>
    <body onload="start()">
      <script>
        var piece;

        function start() {
            piece = new component(16, 16, "red", 180, 352);
            board.start();
        }

        var board = {
            canvas : document.createElement("canvas"),
            start : function() {
                this.canvas.width = 360;
                this.canvas.height = 360;
                this.context = this.canvas.getContext("2d");
                document.body.insertBefore(
                    this.canvas,
                    document.body.childNodes[0]
                );
                this.frameNo = 0;
                this.interval = setInterval(update, 20);
            },
            stop : function() {
                clearInterval(this.interval);
            },
            clear : function() {
                this.context.clearRect(
                    0, 0, this.canvas.width, this.canvas.height
                );
            }
        }

        function component(width, height, color, x, y, type) {
            this.type = type;
            this.width = width;
            this.height = height;
            this.speed = 3;
            this.angle = Math.PI/2-Math.PI/360;
            this.x = x;
            this.y = y;
            this.update = function() {
                context = board.context;
                context.save();
                context.translate(this.x, this.y);
                context.rotate(this.angle);
                context.fillStyle = color;
                context.fillRect(
                    this.width/-2,this.height/-2,this.width,this.height
                );
                context.restore();
            }
            this.newPos = function() {
                this.x += this.speed * Math.sin(this.angle);
                this.y -= this.speed * Math.cos(this.angle);
                this.angle -= Math.PI/180;
            }
        }

        function update() {
            board.clear();
            piece.newPos();
            piece.update();
        }
      </script>
    </body>
  </html>

Mouse click on Canvas: clack.html
.................................

  <!doctype html>
  <html>
    <head>
      <title>Get the coordinates on canvas</title>
      <meta charset="utf-8" />
      <style type="text/css">
        #canvas{
          background-color:black;
          border:1px solid #d3d3d3;
        }
      </style>

      <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", init, false);

        function init()
        {
          var canvas = document.getElementById("canvas");
          canvas.addEventListener("mousedown", getPosition, false);
        }

        function getPosition(event)
        {
          var x = new Number();
          var y = new Number();
          var canvas = document.getElementById("canvas");
          var context = canvas.getContext("2d");

          context.font = "15px Arial";
          context.fillStyle = 'yellow';

          x = event.x - canvas.offsetLeft;;
          y = event.y - canvas.offsetTop;

          context.fillText("x:" + x + " y:" + y, x, y);
        }
      </script>
    </head>
    <body>
      <canvas id="canvas" width="1024" height="768"></canvas>
    </body>
  </html>

Links
.....

  [1]. https://www.w3schools.com/graphics/canvas_drawing.asp

  [2]. http://miloq.blogspot.com.ee/2011/05
         /coordinates-mouse-click-canvas.html
