We Keep Coding

HTML 5 canvas drawing image not showing css

When I try to draw an image on a canvas with a pre-loaded image with css like:
img.style.backgroundColor="red";
ctx.drawImage(img,0,0,100,100);
I find that the image is being drawn as it would appear without the css. Do HTML canvases support css? If not is there a way to overlay a png with transparency with a color only on the pixels that are not transparent?

Can you specify more about our requirement?
You can not set the background colour of an image which is going to draw directly from the canvas. if you altering a color, it will reflect in the source image.
You have to make it from the source element. If you want to fill the box size with some color, you could use fillStyle of the ctx before draw.

Have a look at the example here on w3schools that will get you started on how to load the image and copy it into the canvas. If you don't need the original image to be shown on the page then add 'style="display:none;"' to the img tag. To tint the image have a look at globalAlpha in combination with a filled rect - something along these lines:
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.globalAlpha = 0.5;
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#ff0000";
ctx.fill();
ctx.drawImage(img, 10, 10);
};

Canvas do not render css no matter what css you use for image it will always render plain image unless you draw border or background by yourself

It is possible to overlay the image drawn on a canvas by analyzing each pixel of the drawn image and then overlaying a 1x1 rectangle with the desired color. Here is an example of how to do so:
function overlayColor(img,x,y,a,r,g,b,drawWidth,drawHeight){
//create a canvas in memory and draw the image there to analyze it
var tmpCanvas = document.createElement('canvas');
var context = tmpCanvas.getContext('2d');
tmpCanvas.width = drawWidth;
tmpCanvas.height = drawHeight;
context.drawImage(img,0,0,drawWidth,drawHeight);
let pData = new Array();
for (let i = 0; i < tmpCanvas.width; i++){
for (let j = 0; j < tmpCanvas.height; j++){
if (context.getImageData(i, j, 1, 1).data[3] != 0){//if the pixel is not transparent then add the coordinates to the array
pData.push([i,j]);
}
}
}
//then every pixel that wasn't transparent will be overlayed with a 1x1 rectangle of the inputted color
//drawn at the (x,y) origin which was also given by the user
//this uses ctx, the context of the canvas visible to the user
ctx.fillStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";
for (let i = 0; i < pData.length; i++){
ctx.fillRect(x + pData[i][0],y + pData[i][1],1,1);
}
}
Since the function takes an x and y value the image given by the user will be analyzed and overlayed only on pixels that are not transparent at the coordinate given by the user with the rgba value also given. I have found that this process can result in some lag but it could be overcome by saving the pData array and using the second half of the function to draw the array on screen again.

how to create a canvas dynamically in javascript

I have a canvas that you can draw things with mouse.. When I click the button It has to capture the drawing and add it right under the canvas, and clear the previous one to draw something new..So first canvas has to be static and the other ones has to be created dynamically with the drawing that I draw .. What should I do can anybody help
here is jsfiddle
http://jsfiddle.net/dQppK/378/
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
painting = false,
lastX = 0,
lastY = 0;

You can create a new canvas the same way you’d create any element:
var newCanvas = document.createElement('canvas');
Then you can copy over your old canvas:
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
oldCanvas.parentNode.replaceChild(newCanvas, oldCanvas);
ctx = newCanvas.getContext('2d');
But if you’re just looking to clear your drawing surface, what’s wrong with clearRect?
ctx.clearRect(0, 0, canvas.width, canvas.height);
Or, in your case, another fillRect. Updated demo

here's the function i use for this, it is part of a library i made and use to ease a few things about canvas.
I just put it on github in case other function might be be of use, i'll have to make a readme later...
https://github.com/gamealchemist/CanvasLib
with namespaceing removed, the code is as follow to insert a canvas :
// insert a canvas on top of the current document.
// If width, height are not provided, use all document width / height
// width / height unit is Css pixel.
// returns the canvas.
insertMainCanvas = function insertMainCanvas (_w,_h) {
if (_w==undefined) { _w = document.documentElement.clientWidth & (~3) ; }
if (_h==undefined) { _h = document.documentElement.clientHeight & (~3) ; }
var mainCanvas = ga.CanvasLib.createCanvas(_w,_h);
if ( !document.body ) {
var aNewBodyElement = document.createElement("body");
document.body = aNewBodyElement;
};
document.body.appendChild(mainCanvas);
return mainCanvas;
}

New style is not applied to element on event

I generate some squares dynamically using rahaeljs. These squares have an event handler. When I try to manipulate the style, it fails depending on the attr() I try to set:
function changeColor(obj) {
return function() {
obj.attr({cursor : 'pointer'});
}
}
var main = function () {
var width = 901;
var height = 868;
var space = 50;
var paper = Raphael('paper', width, height);
for (var y = 0; y < height; y += space) {
for (var x = 0; x < width; x += space) {
var r = paper.rect(x, y, space, space);
r.attr({fill : 'transparent'})
r.click(changeColor(r));
}
}
};
window.onload = main;
If I set the cursor to {cursor : 'pointer'}, this works fine, if I try to change the fill color with obj.attr({fill : '#ff00ff'}); in the changeColor-function, nothing happens. There is also no Error in the console.
I'm using the latest version of raphael.
Any suggestions?
Regards,
michael

You'll be either very amused or very frustrated by this answer... the problem has to do with the transparent fill attribute. SVG treats fully transparent objects as unclickable, letting click events filter down to the layer(s) beneath them. Therefore, your rectangles are not receiving click events.
If you can't set the color to a solid color, you can at least give the fill attribute a tiny, almost unnoticeable amount of alpha:
r.attr({ fill: 'rgba(255,255,255,0.001)' } );
That done, you should be back in business!

JavaScript iteration

I want to use JavaScript to draw a series of images onto an HTML5 canvas. I have the following while loop, which I had hoped would draw all of the images to the canvas, however, it is currently only drawing the first one:
function drawLevelOneElements(){
/*First, clear the canvas */
context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
/*This line clears all of the elements that were previously drawn on the canvas. */
/*Then redraw the game elements */
drawGameElements();
/*Draw the elements needed for level 1 (26/04/2012) */
var fileName = 1;
var imagePositionX = 20;
var imagePositionY = 30;
while(fileName < 11){
/*Create an array of images here, move to next element of array on each iteration */
var numbers = new Array();
numbers[0] = "1.png"
numbers[1] = "2.png"
numbers[3] = "3.png"
numbers[4] = "4.png"
numbers[5] = "5.png"
image.src = fileName+".png";
image.src = numbers[0];
image.onload = function(){
context.drawImage(image, imagePositionX, imagePositionY, 50, 50);
}
fileName = fileName+1;
imageY = imageY+20;
console.dir(fileName); /* displays in the console- helpful for debugging */
}
To talk through what I had hoped this function would do:
Load each of the images into a different element of the array (so 1.png would be in numbers[0], 2.png in numbers[1], etc. )
It would then take the global variable 'image', and assign its source to the contents of numbers[0]
Then draw that image at the specified position on the canvas.
Then increment the value of the variable fileName by 1, giving it a value of '2'
Next it would increment the value of the Y co-ordinate where it will draw the image on the canvas by 20- moving the position of the image to be drawn down by 20 pixels
After that it would go back to the start of the loop and draw the next image (2.png) on the canvas in a position that is 20 pixels below the position of the first image that was drawn.
It should continue doing this while the value of the variable 'fileName' is less than 11, i.e. it should draw 10 images each new one below the last one that was drawn.
However, for some reason, my function only draws the first image. Could someone point out what I'm doing wrong, and how I could correct this?
Thanks very much.

Edited and commented some points of your code.
The most effective change was at imageY = imageY+20; that was edited to use imagePositionY variable.
function drawLevelOneElements() {
/*First, clear the canvas */
context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
/*This line clears all of the elements that were previously drawn on the canvas. */
/*Then redraw the game elements */
drawGameElements();
/*Draw the elements needed for level 1 (26/04/2012) */
var fileName = 1;
var imagePositionX = 20;
var imagePositionY = 30;
while(fileName < 11){
/*Create an array of images here, move to next element of array on each iteration */
var numbers = new Array();
/* what is not used is not necessary :)
numbers[0] = "1.png"
numbers[1] = "2.png"
numbers[3] = "3.png"
numbers[4] = "4.png"
numbers[5] = "5.png"*/
image.src = fileName+".png";
// image.src = numbers[0];
image.onload = function(){
context.drawImage(image, imagePositionX, imagePositionY, 50, 50);
}
fileName = fileName+1;
imagePositionY = imagePositionY+20; //before: imageY = imageY+20;
console.dir(fileName); /* displays in the console- helpful for debugging */
}

If you take the drawImg stuff and shove it in its own function you can clean this up a bit :) Now we've yanked the async stuff out of the loop, so the image variable doesn't get over-written each time you loop. You're also using a for loop now, which to me is clearer to understand.
function drawLevelOneElements() {
// your stuff
for (var i = 0; i > 5; i++) {
drawImg(ctx, i, x, y);
// update x or y and whatever else
}
}
// put all your image drawing stuff here
function drawImg(ctx, i, x, y) {
var img = new Image();
img.src = i + ".png";
img.onload = function(){
ctx.drawImage(img, x, y, 50, 50);
}
}

HTML5 Canvas - Repeat Canvas Element as a Pattern

I have a 64x64 canvas square element which I want to repeat in x- and y-directions to fill the page. I've found many explanations on how to do this with an image, but none explaining how to do it with a canvas element. Here is my code so far:
$(document).ready(function(){
var canvas = document.getElementById('dkBg');
var ctx = canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.fillStyle = 'rgb(0,0,0)';
//I want the following rectangle to be repeated:
ctx.fillRect(0,0,64,64);
for(var w=0; w<=64; w++){
for(var h=0; h<=64; h++){
rand = Math.floor(Math.random()*50);
while(rand<20){
rand = Math.floor(Math.random()*50);
}
opacity = Math.random();
while(opacity<0.5){
opacity = Math.random();
}
ctx.fillStyle= 'rgba('+rand+','+rand+','+rand+','+opacity+')';
ctx.fillRect(w,h,1,1);
}
}
});
The thing is, I don't want all of the random numbers/etc to be regenerated. I just want to tile the exact same square to fit the page. Is this possible?
Here is a fiddle: http://jsfiddle.net/ecMDq/

Doing what you want is actually super easy. You do not need to use images at all. The createPattern function accepts an image or another canvas! (Or a video tag, even)
All you have to do is make a canvas that is only 64x64 large and make the pattern on it. Let's call this canvas pattern. You only have to make your design once.
Then with the context of the main canvas we can do:
// "pattern" is our 64x64 canvas, see code in fiddle
var pattern = ctx.createPattern(pattern, "repeat");
ctx.fillStyle = pattern;
Working example using your code to make the pattern, then repeating it onto a 500x500 canvas:
http://jsfiddle.net/tGa8M/

You can get the base64 version of your image using the toDataURL() method of the canvas element.
From there it's as simple as setting the background-image of your page to the string "url(" + base64 + ")"
Here is a working example: http://jsfiddle.net/ecMDq/1/
$(document).ready(function(){
var canvas = document.getElementById('dkBg');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 64; //window.innerWidth;
ctx.canvas.height = 64; //window.innerHeight;
ctx.fillStyle = 'rgb(0,0,0)';
//I want the following rectangle to be repeated:
ctx.fillRect(0,0,64,64);
for(var w=0; w<=64; w++){
for(var h=0; h<=64; h++){
rand = Math.floor(Math.random()*50);
while(rand<20){
rand = Math.floor(Math.random()*50);
}
opacity = Math.random();
while(opacity<0.5){
opacity = Math.random();
}
ctx.fillStyle= 'rgba('+rand+','+rand+','+rand+','+opacity+')';
ctx.fillRect(w,h,1,1);
}
}
document.documentElement.style.backgroundImage =
'url(' +canvas.toDataURL() + ')';
});
Note that you need to make the canvas 64x64 because that's the size of your source image.
You can also now make the canvas display:none, or even remove it from the dom completely because it's only acting as a source for the background-image.
Also, what on earth is up with those while loops?
while(rand<20){
rand = Math.floor(Math.random()*50);
}
It looks like you're trying to enforce a minimum value. Just use this:
rand = Math.floor(Math.random() * (50-20) + 20);