HTML5 Canvas Blend mode with globalCompositeOperation Tutorial

Get last news, demos, posts from Konva

globalCompositeOperation Documentation.

With Konva framework you can set globalCompositeOperation or blending mode operations with globalCompositeOperation property.

Instructions: drag red rectangle over text and see how they will be drawing together.

Konva Blend_Mode Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Blend Mode Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>

<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();

var text = new Konva.Text({
text: 'Text Shadow!',
fontFamily: 'Calibri',
fontSize: 40,
x: 20,
y: 20,
fill: 'green',
// stroke: 'red',
strokeWidth: 2,
shadowColor: 'white',
// shadowBlur: 0,
shadowOffset: { x: 10, y: 10 }
// shadowOpacity: 0.5
});
layer.add(text);

var rect = new Konva.Rect({
x: 50,
y: 50,
// stroke: 'red',
width: 100,
height: 100,
fill: 'red',
draggable: true,
globalCompositeOperation: 'xor'
});

layer.add(rect);
stage.add(layer);
</script>
</body>
</html>