I've got an ipad webapp I'm working on where you can draw on a canvas and save it. Like a more basic paint program. I need to be able to upload and image to the background and draw on it. Right now that wouldn't be too difficult since I got the drawing functionality and it wouldn't be hard to just print the image to the background and draw on it. The problem I'm having is that it also needs to have manageable layers. This means it needs to support alpha pixels.
So what I've done is written a panel class that when paint is called it moves down through it's child panels and paints their buffered images to the temp image. Then I take that and paint it over the parent- continueing until the image is flattened to a temporary image.
This works fine- especially on a desktop. But to accomplish this I had to write the putImageData code from scratch which loops through the array of pixels and paints them taking the alpha in account. Like so-
var offset = (canvasW*4*y)+x*4;
for(var r = 0; r < newHeight; r++)
{
var lineOffset = (size.width*4 - columns)*r + offset;
for(var c = 0; c < columns; c+=4)
{
var start = (r*columns)+c;
var destStart = start+lineOffset;
var red = imageData[start];
var green = imageData[start+1];
var blue = imageData[start+2];
var alpha = imageData[start+3];
var destRed = canvasData[destStart];
var destGreen = canvasData[destStart+1];
var destBlue = canvasData[destStart+2];
var destAlpha = canvasData[destStart+3];
var opacity = alpha/255;
var destOpacity = destAlpha/255;
var invOpacity = 1-opacity;
var newRed = Math.abs(red - ((red-destRed)*invOpacity));
var newGreen = Math.abs(green - ((green-destGreen)*invOpacity));
var newBlue = Math.abs(blue - ((blue-destBlue)*invOpacity));
canvasData[start+lineOffset] = newRed;
canvasData[start+lineOffset+1] = newGreen;
canvasData[start+lineOffset+2] = newBlue;
canvasData[start+lineOffset+3] = 255;
}
}
This takes about 50 miliseconds per layer. Not very good for a desktop. Takes a whopping 1200 miliseconds for the ipad! So I tested it with the original putImageData (which doesn't support alpha) and it was still not very impressive but it's the best I got I'm thinking.
So here is my problem. I know there is an overal opacity for drawing with canvases but it needs to be able to draw some pixels completely opaque and some completely transparent. Is there an putImageData that includes opacity?
If not any recommendations on how I can accomplish this?
As #Jeffrey Sweeney mentioned, try stacking canvases on top of each other. For one of my Javascript library, CInk (search there for z-index), I did the same thing.
I had one container div, which I stuffed with many canvas DOMs to mimic the layers. All canvas DOMs are absolutely positioned and their z-index define the order of the layers. In your case you will have to apply style at specific layers to set its opacity.
Related
I am making a simple animation for fun with a bit of a festive theme. The component I am working on right now is some snowflakes falling. I am keeping things simple; several layers of snowfall each on a separate canvas which move downwards at some rate, each canvas wraps back to the top to make a never-ending fall of snow with parallax.
Currently the position of each snowflake is random (using Math.random()), but the effect is a bit lack lustre, far too even. What I want is snow function that produces a better looking distribution.
The pseudo-code for positioning the flakes looks something like this:
for (var i = 0; i < 1000; i++) {
var coords = placeFlake();
// Take the generated co-ords and place a snowflake on the canvas.
}
function placeFlake() {
// Just return an array of random co-ords within width and height.
var x = // random number within the width
var y = // random number within the height
return [x,y];
}
Just wondered if anybody had any ideas for a replacement for placeFlake()?
I found this issue https://code.google.com/p/android/issues/detail?id=17565 and it seems that it is not going to get solved soon, so I would like to know, how can I draw on canvas without using the putImageData()?
var imgCanvas = document.createElement("canvas");
var ctx = imgCanvas.getContext("2d");
var imageObj.src = 'img/someImage.png';
imageObj.onload = function(){
ctx.draw(imageObj,0,0);
var imageData = ctx.getImageData(0,0,30,30);
var data = imageData.data;
for(var i = 0, n = data.length; i < n; i += 4) {
data[i]+=20;//red
data[i+1]-=20;//green
data[i+2]-=20;//blue
data[i+3]=0; //alpha, но я не трогаю этого параметра
}
ctx.putImageData(imageData,0,0);
}
For instance, in normal browsers, the result of changing a pixel rgba=[100,100,100,200] with the above script should be rgba=[120,80,80,200], but on android's 4.2 default browser the result is not the expected, is something weird like rgba=[153,102,102,200]. Anyway, the point is that there is an issue and I would like to know, how can I change one image's rgba parameters without using the putImageData() method?. If there is not a way with canvas, I would like to know, how can solve this another way? I need to change the image color dinamically, and I need this to work on android (I am using phonegap and the result is the same as in the default android browser). Thank you!
If you want to change the full image color by a factor (for example, add 10 to r, 30 to g and 4 to b), you could use globalComposite operations:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing
Check 'lighter' and 'darker' ops.
If you want to set a different color / factor to each pixel, i think that putImageData is the way to go...
Hope it helps.
I am using CreateJS to add graphics (shapes) and bitmaps to my stage, and add that to my HTML5 canvas.
After moving the circle graphic around the screen (20px in size), there was severe lag after a little while.
I followed this article to figure out performance issues: http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/
So I tried caching... now when I press the keys, the circle does not move. Am I caching incorrectly?
world = new createjs.Container();
segment = new createjs.Shape();
segment.graphics.beginFill("red").drawCircle(0, 0, 20);
segment.x = 100;
segment.y = 100;
segment2 = new createjs.Shape();
segment2.graphics.beginFill("black").drawCircle(0, 0, 20);
segment2.x = 150;
segment2.y = 150;
ContainerOfPeople = new createjs.Container();
ContainerOfPeople.addChild(segment, segment2);
world.addChild(ContainerOfPeople); //add container of people to world container (which will contain all objects in a container)
world.cache(0, 0, 1000, 1000); //cache all objects within world container
stage.addChild(world);
Edit:
If I don't cache the tiles after creating the map, I can see them rendered to the canvas:
function createWorld() {
background = new createjs.Container();
for (var y = 0; y < mapWidth; y++) {
for (var x = 0; x < mapHeight; x++) {
var tile = new createjs.Bitmap('images/tile.png');
tile.x = x * 28;
tile.y = y * 30;
background.addChild(tile);
}
}
//background.cache(0, 0, mapWidth, mapHeight);
stage.addChild(background);
}
If I do cache the background container of tile children, it won't render
function createWorld() {
background = new createjs.Container();
for (var y = 0; y < mapWidth; y++) {
for (var x = 0; x < mapHeight; x++) {
var tile = new createjs.Bitmap('images/tile.png');
tile.x = x * 28;
tile.y = y * 30;
background.addChild(tile);
}
}
background.cache(0, 0, mapWidth, mapHeight);
stage.addChild(background);
}
Why?
You wouldn't want to cache the whole world if you are animating/moving its child objects. Think of caching as taking a snapshot of the DisplayObject and all of its children. While an item is cached, you won't see any changes you make to the children until you update the cache again as explained in the EaselJS docs:
http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#method_cache
cache ( x y width height [scale=1] )
Defined in cache:735
Draws the display object into a new canvas, which is then used for subsequent draws. For complex content that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape), this can provide for much faster rendering because the content does not need to be re-rendered each tick. The cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must manually update the cache by calling updateCache() or cache() again. You must specify the cache area via the x, y, w, and h parameters. This defines the rectangle that will be rendered and cached using this display object's coordinates.
To expand on the explanation, let's say you have a game character that is a Container made up of 6 child shapes, 2 arms, 2 legs, a body and a head. During gameplay, the character's arms and legs flail around. In this scenario, you DON'T want to cache the character as you would be forced to update the cache each time the arms and legs moved, removing any performance gain from caching.
However, let's say once the character dies, he freezes in a dead position, and alpha fades off the screen. In this case you WOULD cache the character. This is because alpha animations become increasingly CPU intensive with the greater number of shapes it has to consider. By caching the character, you are effectively telling the CPU to tween just one shape instead of 6. You can then uncache once your alpha tween is complete and you want to return the player for round 2.
Update
easeljs loads images asynchronously when they are first referenced. Because you aren't preloading your image, the image data isn't yet loaded into memory when you are caching your background.
http://jsfiddle.net/8EvUX/
Here's a fiddle where the image is embedded as a base64 encoded string and is therefore available to cache immediately to prove the caching works as expected. My suggestion would be to use the preloadjs library to load your image first before adding it to the stage.
I am simulating a page turn effect in html5 canvas.
On each page I am drawing lines to simulate lined paper.
These lines are drawn as the page is turned and in order to give natural perspective I am drawing them using quadratic curves based of several factors (page turn progress, closeness to the center of the page etc.. etc...)
The effect is very natural and looks great but I am looking for ways to optimize this.
Currently I am drawing every line twice, once for the actual line and once for a tiny highlight 1px below this line. I am doing this like so:
// render lines (shadows)
self.context.lineWidth = 0.35;
var midpage = (self.PAGE_HEIGHT)/2;
self.context.strokeStyle = 'rgba(0,0,0,1)';
self.context.beginPath();
for(i=3; i < 21; i++){
var lineX = (self.PAGE_HEIGHT/22)*i;
var curveX = (midpage - lineX) / (self.PAGE_HEIGHT);
self.context.moveTo(foldX, lineX);
self.context.quadraticCurveTo(foldX, lineX + ((-verticalOutdent*4) * curveX), foldX - foldWidth - Math.abs(offset.x), lineX + ((-verticalOutdent*2) * curveX));
}
self.context.stroke();
// render lines (highlights)
self.context.strokeStyle = 'rgba(255,255,255,0.5)';
self.context.beginPath();
for(i=3; i < 21; i++){
var lineX = (self.PAGE_HEIGHT/22)*i;
var curveX = (midpage - lineX) / (self.PAGE_HEIGHT);
self.context.moveTo(foldX, lineX+2);
self.context.quadraticCurveTo(foldX, lineX + ((-verticalOutdent*4) * curveX) + 1, foldX - foldWidth - Math.abs(offset.x), lineX + ((-verticalOutdent*2) * curveX) + 1);
}
self.context.stroke();
As you can see I am opening a path, looping through each line, then drawing the path. Then I repeat the whole process for the 'highlight' lines.
Is there any way to combine both of these operations into a single loop without drawing each line individually within the loop which would actually be far more expensive?
This is a micro-optimization, I am well aware of this. However this project is a personal exercise for me in order to learn html5 canvas performance best practices/optimizations.
Thanks in advance for any suggestions/comments
Paths can be stroked as many times as you like, they're not cleared when you call .stroke(), so:
create your path (as above)
.stroke() it
translate the context
change the colours
.stroke() it again
EDIT tried this myself - it didn't work - the second copy of the path didn't notice the translation of the coordinate space :(
It apparently would work if the path was created using new Path() as documented in the (draft) specification instead of the "current default path" but that doesn't appear to be supported in Chrome yet.
I am having a problem with updating the canvas. The code is hosted at http://ssarangi.github.com/nombre/. The problem is I am loading a red image and after the loading is done I convert the image to Yellow and want to re-render it to the canvas.
// Turn to Yellow
function updateImage() {
// Update the image
var ctx = canvas2d.getContext("2d");
var width = canvas2d.width;
var height = canvas2d.height;
var pixels = ctx.getImageData(0, 0, width, height);
for (var x = 0; x < width; ++x) {
for (var y = 0; y < height; ++y) {
var offset = (y * width + x) * 4;
pixels.data[offset] = 0;
pixels.data[offset+1] = 255;
pixels.data[offset+2] = 255;
pixels.data[offset+3] = 255;
}
}
ctx.putImageData(pixels, 0, 0);
}
However, the ctx doesn't update the pixels. However, doing the same thing on a simple html page did work for me. This example enables WebGL though. Could someone point me to the right direction.
Thanks.
Nothing is wrong with the code provided, except that it claims to make yellow pixels when it in fact makes teal pixels. Here it is modified and working, making yellow pixels:
http://jsfiddle.net/TCf6f/
The code on your webpage works when you set a breakpoint in the chrome debugger, specifically it turns the canvas teal as your code specifies. It does not seem to work when there isn't a breakpoint, and I imagine the size of the CanvasPixelArray is to blame. What happens with a smaller canvas?
Whats weirder, sometimes you can set a breakpoint and see the operation partially working, like here:
With earlier breakpoints lead to the entire thing being the correct teal.
If a smaller canvas works, try modifying the pixel array in 4 or 8 chunks and see what happens.