Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Change colour of an image drawn on an HTML5 canvas element.
In order to change colour of image drawn on an HTML5 Canvas element, you can try to run the following code. Use the drawImage() method −
Example: Code to change color of image
function display(img1, red, gr, bl) { //func to change color of image
var canvas1 = document.createElement('canvas');//canvas element initialisation
canvas1.width = img.width;//canvas width initialisation
canvas1.height = img.height; //canvas height initialisation
var ctx1 = canvas1.getContext('2d');
ctx1.drawImage(img, 0, 0);
var myImg =ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
for (var t=0;t< myImg.data.length;t+=4) {
myImg.data[t]= red | myImg.data[t];
myImg.data[t+1]= gr | myImg.data[t+1];
myImg.data[t+2]= bl | myImg.data[t+2];
}
ctx1.putImageData(myImg,0,0); // Image data is adjusted according to context
return c;
},
Updated on: 22-Nov-2023
943 Views
Advertisements