HTML5 Game - Canvas Shape Ship

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Ship

Drawing the player ship

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="200" height="200">
 Your browser does not support the HTML 5 Canvas. 
</canvas>/*from   w w w  .jav a2s  .c o m*/
<script type="text/javascript">
    let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');
   
    //drawShip
    context.strokeStyle = 'red';
    context.beginPath();
    context.moveTo(10,0); 
    context.lineTo(19,19);
    context.lineTo(10,9);
    context.moveTo(9,9); 
    context.lineTo(0,19);
    context.lineTo(9,0);
    
    context.stroke();
    context.closePath();
</script> 

</div>
</body>
</html>

Related Topics