Canvas compositing methods

2,214 Kb

How do I make an canvas compositing methods?

Here I've layered three shapes using all the available compositing options. At first I was surprised that some canvases appeared blank and thought I'd made a mistake, but I soon realised that for these methods, unless all the shapes overlap the same part of the canvas, then the canvas will appear blank.. What is a canvas compositing methods? How do you make a canvas compositing methods? This script and codes were developed by Ed Ball on 12 November 2022, Saturday.

Canvas compositing methods Previews

Canvas compositing methods - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas compositing methods</title> <link rel="stylesheet" href="css/style.css">
<body> <div class="wrapper"> <div> <p>Source-over</p> <canvas id="source-over" width="200" height="200"></canvas> </div> <div> <p>Source-in</p> <canvas id='source-in' width="200" height="200"></canvas> </div> <div> <p>Source-out</p> <canvas id='source-out' width="200" height="200"></canvas> </div> <div> <p>Source-atop</p> <canvas id='source-atop' width="200" height="200"></canvas> </div> <div> <p>Destination-over</p> <canvas id='destination-over' width="200" height="200"></canvas> </div> <div> <p>Destination-in</p> <canvas id='destination-in' width="200" height="200"></canvas> </div> <div> <p>Destination-out</p> <canvas id='destination-out' width="200" height="200"></canvas> </div> <div> <p>Destination-atop</p> <canvas id='destination-atop' width="200" height="200"></canvas> </div> <div> <p>Lighter</p> <canvas id='lighter' width="200" height="200"></canvas> </div> <div> <p>Darker</p> <canvas id='darker' width="200" height="200"></canvas> </div> <div> <p>Xor</p> <canvas id='xor' width="200" height="200"></canvas> </div> <div> <p>Copy</p> <canvas id='copy' width="200" height="200"></canvas> </div>
</div> <script src="js/index.js"></script>

Canvas compositing methods - Script Codes CSS Codes

.wrapper{ max-width:1000px;
.wrapper div{ width:200px; height:300px; float:left; margin-right:20px
canvas{ border: solid 1px grey

Canvas compositing methods - Script Codes JS Codes

var compositeTypes = new Array( "source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "lighter", "darker", "xor", "copy"
for ( i = 0 ; i < 12 ; i++){ var canvas, ctx; canvas = document.getElementById(compositeTypes[i]); ctx = canvas.getContext('2d'); // blue circle ctx.beginPath(); ctx.arc(0, 0, 100, 0, 2 * Math.PI, false); ctx.fillStyle = 'blue'; ctx.fill(); ctx.globalCompositeOperation = compositeTypes[i]; // red rectangle ctx.beginPath(); ctx.rect(50, 50, 100, 100); ctx.fillStyle = 'red'; ctx.fill(); // green circle ctx.beginPath(); ctx.arc(200, 200, 100, 0, 2 * Math.PI, false); ctx.fillStyle = 'green'; ctx.fill();
Canvas compositing methods - Script Codes
Canvas compositing methods - Script Codes
Home Page Home
Developer Ed Ball
Username edball
Uploaded November 12, 2022
Rating 3.5
Size 2,214 Kb
Views 14,161
Do you need developer help for Canvas compositing methods?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ed Ball (edball) Script Codes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!