HTML5 Game - Canvas Drawing Shape

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

Description

Drawing Shape

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { //  w  ww.j  a  va  2s.c  om
  border: 1px solid #000; 
} 
        </style> 
    </head> 
    <body> 
      <canvas id="myCanvas" width="200" height="200">Did You Know: Every time 
        you use a browser that doesn't support HTML5
      </canvas> 
      <script> 
// Get the context we will be using for drawing. 
let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
  
// Set the stroke style. 
myContext.strokeStyle = '#000000'; 
myContext.lineWidth = 5;  
  
// Create a closed path. 
myContext.beginPath(); 
// Start the path at (30, 10). 
myContext.moveTo(30, 10); 
// Draw a line from the current pen location at (30, 10) to (50, 50). 
myContext.lineTo(50, 50); 
// Draw a line from current pen location at (50, 50) to (10, 50); 
myContext.lineTo(10, 50); 
// The pen is now currently at (10, 50). Closing the path will draw a straight 
// line from (10, 50) back to the beginning point of the path at (30, 10). 
myContext.closePath(); 
// We can't see the path without stroking it. 
myContext.stroke(); 
  
// Create a new path. 
myContext.beginPath(); 
// Start the path at (60, 10). 
myContext.moveTo(60, 10); 
// Draw a line from the current pen location at (60, 10) to (100, 10). 
myContext.lineTo(100, 10); 
// Move the pen from its current location at (100, 10) to (100, 50). 
myContext.moveTo(100, 50); 
// Draw a line from the current pen location at (100, 50) to (60, 50). 
myContext.lineTo(60, 50); 

myContext.strokeStyle = '#ff0000'; 
myContext.stroke(); 
  
myContext.beginPath(); 

myContext.strokeStyle = '#00ff00';  
myContext.stroke(); 
      </script> 
    </body> 
</html>

Related Topic