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://unpkg.com/[email protected]/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.height() / 2,
sides: 5,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});

var patternPentagon = new Konva.RegularPolygon({
x: 220,
y: stage.height() / 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.height() / 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.height() / 2,
sides: 5,
radius: 70,
fillRadialGradientStartPoint: { x: 0, y: 0 },
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: { x: 0, y: 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.fill('blue');
});

colorPentagon.on('mouseout touchend', function () {
this.fill('red');
});

patternPentagon.on('mouseover touchstart', function () {
this.fillPatternImage(images.yoda);
this.fillPatternOffset({ x: -100, y: 70 });
});

patternPentagon.on('mouseout touchend', function () {
this.fillPatternImage(images.darthVader);
this.fillPatternOffset({ x: -220, y: 70 });
});

linearGradPentagon.on('mouseover touchstart', function () {
this.fillLinearGradientStartPoint({ x: -50 });
this.fillLinearGradientEndPoint({ x: 50 });
this.fillLinearGradientColorStops([0, 'green', 1, 'yellow']);
});

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'],
});
});

radialGradPentagon.on('mouseover touchstart', function () {
this.fillRadialGradientColorStops([
0,
'red',
0.5,
'yellow',
1,
'green',
]);
});

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.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>
Enjoying Konva? Please consider to support the project.