- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Composition attribute in HTML5 Canvas?
HTML5 canvas provides compositing attribute globalCompositeOperation that affect all the drawing operations.
<!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>
Advertisements