
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
What is composition in HTML5 Canvas?
HTML5 canvas provides compositing attribute globalCompositeOperation that affect all the drawing operations.
Example
We can draw new shapes behind existing shapes and mask off certain areas, clear sections from the canvas using globalCompositeOperation attribute as shown below in the example.
<!DOCTYPE HTML> <html> <head> <script> var compositeTypes = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out', 'destination-atop','lighter','darker','copy','xor' ]; function drawShape(){ for (i=0;i<compositeTypes.length;i++){ var label = document.createTextNode(compositeTypes[i]); document.getElementById('lab'+i).appendChild(label); var ctx = document.getElementById('tut'+i).getContext('2d'); // draw rectangle ctx.fillStyle = "#FF3366"; ctx.fillRect(15,15,70,70); // set composite property ctx.globalCompositeOperation = compositeTypes[i]; // draw circle ctx.fillStyle = "#0066FF"; ctx.beginPath(); ctx.arc(75,75,35,0,Math.PI*2,true); ctx.fill(); } } </script> </head> <body onload="drawShape();"> <table border="1" align="center"> <tr> <td><canvas id="tut0" width="125" height="125"></canvas><br/> <label id="lab0"></label> </td> <td><canvas id="tut1" width="125" height="125"></canvas><br/> <label id="lab1"></label> </td> <td><canvas id="tut2" width="125" height="125"></canvas><br/> <label id="lab2"></label> </td> </tr> <tr> <td><canvas id="tut3" width="125" height="125"></canvas><br/> <label id="lab3"></label> </td> <td><canvas id="tut4" width="125" height="125"></canvas><br/> <label id="lab4"></label> </td> <td><canvas id="tut5" width="125" height="125"></canvas><br/> <label id="lab5"></label> </td> </tr> <tr> <td><canvas id="tut6" width="125" height="125"></canvas><br/> <label id="lab6"></label> </td> <td><canvas id="tut7" width="125" height="125"></canvas><br/> <label id="lab7"></label> </td> <td><canvas id="tut8" width="125" height="125"></canvas><br/> <label id="lab8"></label> </td> </tr> <tr> <td><canvas id="tut9" width="125" height="125"></canvas><br/> <label id="lab9"></label> </td> <td><canvas id="tut10" width="125" height="125"></canvas><br/> <label id="lab10"></label> </td> <td><canvas id="tut11" width="125" height="125"></canvas><br/> <label id="lab11"></label> </td> </tr> </table> </body> </html>
- Related Articles
- Composition attribute in HTML5 Canvas?
- What is getContext in HTML5 Canvas?
- What is a transformation matrix in HTML5 canvas?
- What is the difference between SVG and HTML5 Canvas?
- What are free libraries for Canvas in HTML5?
- Translating HTML5 canvas
- HTML5 Canvas distorted
- HTML5 Canvas Transformation
- What are save and restore methods in HTML5 Canvas?
- HTML5 Canvas Transformation Matrix
- HTML5 Canvas Circle Text
- HTML5 Canvas Degree Symbol
- What is composition in C#?
- HTML5 Canvas Font Size Based on Canvas Size
- How to center canvas in HTML5?

Advertisements