HTML5 Canvas Set Fill Tutorial

To fill a shape with Konva, we can set the fill property when we instantiate a shape, or we can use the fill() method.

Konva supports colors, patterns, linear gradients, and radial gradients.

Instructions: Mouseover each pentagon to change its fill. You can also drag and drop the shapes.

Konva Fill Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.3/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Fill Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function draw(images) {
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 colorPentagon = new Konva.RegularPolygon({
x: 80,
y: stage.getHeight() / 2,
sides: 5,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
var patternPentagon = new Konva.RegularPolygon({
x: 220,
y: stage.getHeight() / 2,
sides: 5,
radius: 70,
fillPatternImage: images.darthVader,
fillPatternOffset: { x : -220, y : 70},
stroke: 'black',
strokeWidth: 4,
draggable: true
});
var linearGradPentagon = new Konva.RegularPolygon({
x: 360,
y: stage.getHeight() / 2,
sides: 5,
radius: 70,
fillLinearGradientStartPoint: { x : -50, y : -50},
fillLinearGradientEndPoint: { x : 50, y : 50},
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
var radialGradPentagon = new Konva.RegularPolygon({
x: 500,
y: stage.getHeight() / 2,
sides: 5,
radius: 70,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 70,
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
/*
* bind listeners
*/
colorPentagon.on('mouseover touchstart', function() {
this.setFill('blue');
layer.draw();
});
colorPentagon.on('mouseout touchend', function() {
this.setFill('red');
layer.draw();
});
patternPentagon.on('mouseover touchstart', function() {
this.setFillPatternImage(images.yoda);
this.setFillPatternOffset({ x : -100, y : 70});
layer.draw();
});
patternPentagon.on('mouseout touchend', function() {
this.setFillPatternImage(images.darthVader);
this.setFillPatternOffset({x : -220, y :70});
layer.draw();
});
linearGradPentagon.on('mouseover touchstart', function() {
this.setFillLinearGradientStartPoint({ x: -50});
this.setFillLinearGradientEndPoint({ x : 50});
this.setFillLinearGradientColorStops([0, 'green', 1, 'yellow']);
layer.draw();
});
linearGradPentagon.on('mouseout touchend', function() {
// set multiple properties at once with setAttrs
this.setAttrs({
fillLinearGradientStartPoint: {x : -50, y : -50},
fillLinearGradientEndPoint: { x : 50, y : 50},
fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
});
layer.draw();
});
radialGradPentagon.on('mouseover touchstart', function() {
this.setFillRadialGradientColorStops([0, 'red', 0.5, 'yellow', 1, 'green']);
layer.draw();
});
radialGradPentagon.on('mouseout touchend', function() {
// set multiple properties at once with setAttrs
this.setAttrs({
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 70,
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue']
});
layer.draw();
});
layer.add(colorPentagon);
layer.add(patternPentagon);
layer.add(linearGradPentagon);
layer.add(radialGradPentagon);
stage.add(layer);
}
var sources = {
darthVader: '/assets/darth-vader.jpg',
yoda: '/assets/yoda.jpg'
};
loadImages(sources, function(images) {
draw(images);
});
</script>
</body>
</html>