HTML5 Game - Canvas Extending CanvasRenderingContext2D

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Drawing Using Paths

Description

Extending CanvasRenderingContext2D

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
     <title>Extending CanvasRenderingContext2D to Draw Dashed lines</title>

      <style> 
         body {// www.  j a va 2 s.  c  om
            background: #dddddd;
         }

         #canvas {
            position: absolute;
            left: 0px;
            top: 0px;
            margin: 20px;
            background: #ffffff;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

  <body>
    <canvas id='canvas' width='500' height='500'>
      Canvas not supported
    </canvas>

    <script>

let context = document.getElementById('canvas').getContext('2d'),
    moveToFunction = CanvasRenderingContext2D.prototype.moveTo;

CanvasRenderingContext2D.prototype.lastMoveToLocation = {};

CanvasRenderingContext2D.prototype.moveTo = function (x, y) {
   moveToFunction.apply(context, [x,y]);
   this.lastMoveToLocation.x = x;
   this.lastMoveToLocation.y = y;
};

CanvasRenderingContext2D.prototype.dashedLineTo = function (x, y, dashLength) {
   dashLength = dashLength === undefined ? 5 : dashLength;

   let startX = this.lastMoveToLocation.x;
   let startY = this.lastMoveToLocation.y;

   let deltaX = x - startX;
   let deltaY = y - startY;
   let numDashes = Math.floor(Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);

   for (let i=0; i < numDashes; ++i) {
      this[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]
         (startX + (deltaX / numDashes) * i, startY + (deltaY / numDashes) * i);
   }

   this.moveTo(x, y);
};

context.lineWidth = 3;
context.strokeStyle = 'blue';

context.moveTo(20, 20);
context.dashedLineTo(context.canvas.width-20, 20);
context.dashedLineTo(context.canvas.width-20, context.canvas.height-20);
context.dashedLineTo(20, context.canvas.height-20);
context.dashedLineTo(20, 20);
context.dashedLineTo(context.canvas.width-20, context.canvas.height-20);
context.stroke();
      
      </script>
  </body>
</html>

Related Topic