Current Location：How HTML > HTML Articles > Content

Change Color of an Image Drawn on an HTML5 Canvas Element

Change Color of an Image Drawn on an HTML5 Canvas Element

Manipulating images using HTML5 canvas is a powerful feature that allows developers to create dynamic graphics and interactive experiences on the web. One of the common tasks you might want to perform is changing the color of an image drawn on a canvas. This can be done by manipulating the pixel data of the image, applying filters, or using blending modes. In this article, we will explore various methods to change the color of an image drawn on an HTML5 canvas element, along with detailed examples.

Basic Canvas Setup

Before we delve into changing colors, let’s set up a basic canvas element in HTML. This will be the foundation for our examples.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Color Change Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
// JavaScript code will go here
</script>
</body>
</html>

Drawing an Image on the Canvas

To change the color of an image, we first need to draw it onto the canvas. Here’s how you can do that:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draw Image on Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
};
image.src = 'https://how2html.com/wp-content/themes/dux/img/logo.png';
</script>
</body>
</html>

Output:

Change Color of an Image Drawn on an HTML5 Canvas Element

Changing Image Color to Grayscale

One of the simplest color changes you can make is converting an image to grayscale. Here’s an example of how to do that:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grayscale Image on Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = avg; // red
        data[i + 1] = avg; // green
        data[i + 2] = avg; // blue
    }
    ctx.putImageData(imageData, 0, 0);
};
image.src = 'https://how2html.com/wp-content/themes/dux/img/logo.png';
</script>
</body>
</html>

Output:

Change Color of an Image Drawn on an HTML5 Canvas Element

Tinting an Image with a Specific Color

To tint an image, you can add a color overlay. Here’s an example of tinting an image red:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Red Tint Image on Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
};
image.src = 'https://how2html.com/wp-content/themes/dux/img/logo.png';
</script>
</body>
</html>

Output:

Change Color of an Image Drawn on an HTML5 Canvas Element

Inverting Image Colors

Inverting the colors of an image can create a striking effect. Here’s how to invert the colors on a canvas:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Invert Image Colors on Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        data[i] = 255 - data[i]; // red
        data[i + 1] = 255 - data[i + 1]; // green
        data[i + 2] = 255 - data[i + 2]; // blue
    }
    ctx.putImageData(imageData, 0, 0);
};
image.src = 'https://how2html.com/wp-content/themes/dux/img/logo.png';
</script>
</body>
</html>

Output:

Change Color of an Image Drawn on an HTML5 Canvas Element

Applying a Sepia Tone

Applying a sepia tone can give an image a warm, vintage look. Here’s an example of applying a sepia effect:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sepia Tone Image on Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        const red = data[i];
        const green = data[i + 1];
        const blue = data[i + 2];
        data[i] = (red * 0.393) + (green * 0.769) + (blue * 0.189); // red
        data[i + 1] = (red * 0.349) + (green * 0.686) + (blue * 0.168); // green
        data[i + 2] = (red * 0.272) + (green * 0.534) + (blue * 0.131); // blue
    }
    ctx.putImageData(imageData, 0, 0);
};
image.src = 'https://how2html.com/wp-content/themes/dux/img/logo.png';
</script>
</body>
</html>

Output:

Change Color of an Image Drawn on an HTML5 Canvas Element

Adjusting Brightness

To adjust the brightness of an image, you can modify the RGB values of each pixel. Here’s an example of increasing the brightness:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Brightness Adjustment on Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        data[i] += 50; // red
        data[i + 1] += 50; // green
        data[i + 2] += 50; // blue
    }
    ctx.putImageData(imageData, 0, 0);
};
image.src = 'https://how2html.com/wp-content/themes/dux/img/logo.png';
</script>
</body>
</html>

Output:

Change Color of an Image Drawn on an HTML5 Canvas Element

Creating a Color Filter Effect

You can create various color filter effects by manipulating the RGB channels. Here’s an example of a blue filter effect:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blue Filter Effect on Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        data[i] = data[i] * 0.272; // red
        data[i + 1] = data[i + 1] * 0.534; // green
        data[i + 2] = data[i + 2] * 0.131 + 150; // blue
    }
    ctx.putImageData(imageData, 0, 0);
};
image.src = 'https://how2html.com/wp-content/themes/dux/img/logo.png';
</script>
</body>
</html>

Output:

Change Color of an Image Drawn on an HTML5 Canvas Element

Changing Image Color to Black and White

Converting an image to black and white is another common task. Here’s how you can do that:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Black and White Image on Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
    ctx.drawImage(image, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = avg > 128 ? 255 : 0; // red
        data[i + 1] = avg > 128 ? 255 : 0; // green
        data[i + 2] = avg > 128 ? 255 : 0; // blue
    }
    ctx.putImageData(imageData, 0, 0);
};
image.src = 'https://how2html.com/wp-content/themes/dux/img/logo.png';
</script>
</body>
</html>

Output:

Change Color of an Image Drawn on an HTML5 Canvas Element

Conclusion

In this article, we have explored various methods to change the color of an image drawn on an HTML5 canvas element. We have seen how to convert an image to grayscale, tint an image with a specific color, invert image colors, apply a sepia tone, adjust brightness, create a color filter effect, and convert an image to black and white. These techniques can be combined and modified to create a wide range of effects and transformations. Remember that manipulating pixel data can be computationally intensive, so it’s best to perform these operations sparingly or in a way that doesn’t block the main thread. Happy coding!

Like(1)

HTML Articles

Top
Top