HTML5 Game - Creating a Clipping Area

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Clip

Description

Creating a Clipping Area

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { /*from w w w .jav  a  2  s.  com*/
  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'); 
  
// Create a square clipping area. 
myContext.beginPath(); 
myContext.rect(50, 50, 50, 50); 
myContext.clip(); 
  
// Draw a large circle in the canvas and fill it. Only the portion within 
// the clipping area will be visible. myContext.beginPath(); 
myContext.arc(75, 75, 100, 0, 7); 
myContext.fillStyle = 'red'; 
myContext.fill(); 
      </script> 
    </body> 
</html>

Related Topic