HTML5 Game - Fill a path

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

Description

Fill a path

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
<head>
<body>
<canvas id="canvas" width="700" height="500"></canvas>
<script>
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d'); 

context.strokeStyle = '#0000ff';
context.lineWidth = 2;//from  www.  ja v a  2  s  .  c  o  m
context.beginPath() ;
context.moveTo(50, 50);
context.lineTo(150, 50);
context.lineTo(150, 200);
context.lineTo(50, 200);
context.lineTo(50, 50);
context.stroke();
context.fillStyle = '#00ff00';
context.fill();

context.fillRect(250,50,150,100);  
  </script>
</body>
</html>

Related Topic