Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Change colour of an image drawn on an HTML5 canvas element.
In order to change the color of an image drawn on an HTML5 Canvas element, you need to manipulate the pixel data of the image. This is achieved by using the drawImage() method to draw the image onto the canvas, then accessing and modifying the pixel data using getImageData() and putImageData() methods.
Syntax
Following is the syntax for drawing an image on canvas −
ctx.drawImage(image, x, y);
Following is the syntax for getting image data −
var imageData = ctx.getImageData(x, y, width, height);
Following is the syntax for putting modified image data back −
ctx.putImageData(imageData, x, y);
How Color Manipulation Works
The getImageData() method returns an ImageData object that contains pixel information in RGBA format. Each pixel is represented by four consecutive values in the data array −
- Red − Index 0, 4, 8, 12...
- Green − Index 1, 5, 9, 13...
- Blue − Index 2, 6, 10, 14...
- Alpha − Index 3, 7, 11, 15...
Using Color Tinting with Bitwise OR
Example
Following example demonstrates how to change the color of an image using bitwise OR operation −
<!DOCTYPE html>
<html>
<head>
<title>Change Image Color with Bitwise OR</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Original vs Color Tinted Image</h2>
<canvas id="originalCanvas" width="100" height="100" style="border: 1px solid black;"></canvas>
<canvas id="tintedCanvas" width="100" height="100" style="border: 1px solid black; margin-left: 20px;"></canvas>
<script>
function changeImageColor(img, red, green, blue) {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (var i = 0; i < imageData.data.length; i += 4) {
imageData.data[i] = red | imageData.data[i]; // Red
imageData.data[i + 1] = green | imageData.data[i + 1]; // Green
imageData.data[i + 2] = blue | imageData.data[i + 2]; // Blue
}
ctx.putImageData(imageData, 0, 0);
return canvas;
}
// Create a simple colored rectangle as test image
var originalCanvas = document.getElementById('originalCanvas');
var originalCtx = originalCanvas.getContext('2d');
// Draw a simple pattern
originalCtx.fillStyle = '#4CAF50';
originalCtx.fillRect(20, 20, 60, 30);
originalCtx.fillStyle = '#2196F3';
originalCtx.fillRect(20, 60, 60, 20);
// Convert canvas to image and apply color change
var img = new Image();
img.onload = function() {
var tintedCanvas = changeImageColor(img, 200, 0, 0);
var targetCanvas = document.getElementById('tintedCanvas');
var targetCtx = targetCanvas.getContext('2d');
targetCtx.drawImage(tintedCanvas, 0, 0);
};
img.src = originalCanvas.toDataURL();
</script>
</body>
</html>
The original image appears on the left, and the red-tinted version appears on the right using bitwise OR operation.
Using Color Multiplication
A more controlled approach uses multiplication to adjust color channels −
Example
<!DOCTYPE html>
<html>
<head>
<title>Change Image Color with Multiplication</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Color Multiplication Example</h2>
<canvas id="sourceCanvas" width="120" height="80" style="border: 1px solid black;"></canvas>
<canvas id="modifiedCanvas" width="120" height="80" style="border: 1px solid black; margin-left: 20px;"></canvas>
<script>
function multiplyImageColor(canvas, redFactor, greenFactor, blueFactor) {
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (var i = 0; i < imageData.data.length; i += 4) {
imageData.data[i] *= redFactor; // Red channel
imageData.data[i + 1] *= greenFactor; // Green channel
imageData.data[i + 2] *= blueFactor; // Blue channel
// Alpha channel (i + 3) remains unchanged
}
ctx.putImageData(imageData, 0, 0);
}
var sourceCanvas = document.getElementById('sourceCanvas');
var sourceCtx = sourceCanvas.getContext('2d');
// Draw colorful pattern
sourceCtx.fillStyle = '#FF6B6B';
sourceCtx.fillRect(10, 10, 40, 25);
sourceCtx.fillStyle = '#4ECDC4';
sourceCtx.fillRect(60, 10, 40, 25);
sourceCtx.fillStyle = '#45B7D1';
sourceCtx.fillRect(10, 45, 40, 25);
sourceCtx.fillStyle = '#F9CA24';
sourceCtx.fillRect(60, 45, 40, 25);
// Copy to second canvas and apply color multiplication
var modifiedCanvas = document.getElementById('modifiedCanvas');
var modifiedCtx = modifiedCanvas.getContext('2d');
modifiedCtx.drawImage(sourceCanvas, 0, 0);
// Apply blue tint (reduce red and green, enhance blue)
multiplyImageColor(modifiedCanvas, 0.3, 0.3, 1.5);
</script>
</body>
</html>
The right canvas shows the image with reduced red and green channels while enhancing the blue channel, creating a blue tint effect.
Using Composite Operation for Color Overlay
Canvas composite operations provide another way to change image colors −
Example
<!DOCTYPE html>
<html>
<head>
<title>Color Overlay with Composite Operations</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Original Image and Color Overlay</h2>
<canvas id="baseCanvas" width="150" height="100" style="border: 1px solid black;"></canvas>
<canvas id="overlayCanvas" width="150" height="100" style="border: 1px solid black; margin-left: 20px;"></canvas>
<br><br>
<button onclick="applyOverlay('red')">Red Overlay</button>
<button onclick="applyOverlay('green')">Green Overlay</button>
<button onclick="applyOverlay('blue')">Blue Overlay</button>
<button onclick="resetOverlay()">Reset</button>
<script>
var baseCanvas = document.getElementById('baseCanvas');
var baseCtx = baseCanvas.getContext('2d');
var overlayCanvas = document.getElementById('overlayCanvas');
var overlayCtx = overlayCanvas.getContext('2d');
// Draw base image
baseCtx.fillStyle = '#8E44AD';
baseCtx.fillRect(25, 20, 50, 30);
baseCtx.fillStyle = '#E74C3C';
baseCtx.fillRect(75, 20, 50, 30);
baseCtx.fillStyle = '#F39C12';
baseCtx.fillRect(50, 50, 50, 30);
function applyOverlay(color) {
overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
overlayCtx.drawImage(baseCanvas, 0, 0);
overlayCtx.globalCompositeOperation = 'multiply';
overlayCtx.fillStyle = color;
overlayCtx.fillRect(0, 0, overlayCanvas.width, overlayCanvas.height);
overlayCtx.globalCompositeOperation = 'source-over';
}
function resetOverlay() {
overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
overlayCtx.drawImage(baseCanvas, 0, 0);
}
// Initialize with base image
resetOverlay();
</script>
</body>
</html>
Click the buttons to see different color overlays applied using the multiply composite operation, which blends the overlay color with the original image colors.
Comparison of Color Change Methods
Updated on: 2026-03-16T21:38:53+05:30
2K+ Views
Advertisements