I'm creating an arcade game using Javascript that draws to a 2D Canvas context.
To simulate 'pain' in sprites that have been shot I want to have them flash orange.
I currently draw the image to the canvas using ctx.drawImage().
Rather than create more artwork to apply the 'in pain' effect I'd like to use Javascript.
I've researched globalCompositeOperation but as yet can't find a solution.
Here is the original image drawn to the canvas over the scrolling background graphic:
In theory I'd like to then apply a rectangular orange area using fillRect():
The effect that I'm after is this:
Not this:
Does anybody know if this is possible?
I have a HTML5 canvas that fills the screen and looks like this:
In this state it is fully zoomed out, but I allow the user zoom in and pan around like in google maps. Every time the viewport changes, I redraw everything that is visible inside the viewport to the canvas. (So as you zoom in less things need to be drawn).
Right now zooming and panning comes with a lot of lag, because each redraw takes 30 milliseconds. When profiling in google chrome, the majority of the time comes from the context.fill() (for drawing a coloured circle) and context.drawImage() (for drawing a glossy transparent overlay on the circles).
So my rendering is very inefficient, but since the draws only happen when the viewport bounds change, its not like I have the option to only redraw a small portion of the screen at a time.
Does anyone know another way I can optimize this?
One idea I was wondering about was to draw the entire thing onto an invisible canvas, and only copy over the viewport bounds to the main canvas. But the invisible canvas would be 2000x2000 pixels. So I am unsure if this would be a good idea.
Drawing multiple light images is faster than drawing multiple fill+images and drawing a single image containing a grid of multiple lights is faster still. So...
Draw a single image of the 17x17 grid of lights all red (or all brown if brown is more common).
Then over-draw only those lights that need to be brown.
Use images of the brown lights rather than brown fill + a glossy overlaid image.
http://i.stack.imgur.com/4oAYt.png
This is original when not insert image. it has blank image
http://i.stack.imgur.com/aupwr.png
i want to know how to make the image curve fit the edge (in red circle the image is fit in edge).
what the framework can do this?
raphaeljs
fabricjs
kineticjs
Thank everyone for help me. sorry for bad english.
Best Regard.
Around a square corner
You can use shearing transforms to give the illusion that a rectangular image is being shaped around corners. Shearing transforms are how you would put your rectangular logo image on a rectangular “3d” box. For “shearing” effects you can use any of the good libraries you mention…or even just use canvas itself. However , shearing effects give you sharp creased edge transforms rather than curved transforms. Here’s an example: http://www.createjs.com/#!/EaselJS/demos/transform
Around a curved corner
But for truly curved transforms, you will need webGL or an image processing library that does perspective transforms.
Check out the server based ImageMagick tool and in particular look at the 3d Boxes, Perspective Layering section on this page: http://www.imagemagick.org/Usage/distorts/#methods
Quoting the imagemagick.org page:
This image was created by taking a [rectangular] image of a anime
video box cover, splitting up that cover into 3 segments ('cover',
'spine', and 'back'), distorting each separately, into layered images.
The image was then finished by the addition of highlights and shading
effects (using HardLight image composition), and the addition of
border and semi-transparent shadow effects (using CopyOpacity).
You can also do this in Photoshop--probably much easier ;)
Bring your logo image and your phone case into Photoshop on separate layers.
Use “Free Transform” to rotate your image to the same angle as the phone case.
Use “Warp” in “Custom” mode to wrap the image around the phone case (the grid helps guide you).
There’s not much lighting in your phone case, but use “Blending” in the overlay mode to have your transformed image take on the highlights of the phone case.
I'm trying to draw a tiled background using Javascript on an HTML5 canvas, but it's not working because shapes that intersect the edges of the canvas don't wrap around to the other side. (Just to be clear: these are static shapes--no motion in time is involved.) How can I get objects interrupted by one side of the canvas to wrap around to the other side?
Basically I'm looking for the "wraparound" effect that many video games use--most famously Asteroids; I just want that effect for a static purpose here. This page seems to be an example that shows it is possible. Note how an asteroid, say, on the right edge of the screen (whether moving or not) continues over to the left edge. Or for that matter, an object in the corner is split between all four corners. Again, no motion is necessarily involved.
Anyone have any clues how I might be able to draw, say, a square or a line that wraps around the edges? Is there perhaps some sort of option for canvas or Javascript? My google searches using obvious keywords have come up empty.
Edit
To give a little more context, I'm basing my work off the example here: Canvas as Background Image. (Also linked from here: Use <canvas> as a CSS background.) Repeating the image is no problem. The problem is getting the truncated parts of shapes to wrap around to the other side.
I'm not sure how you have the tiles set-up, however, if they are all part of a single 'wrapper' slide which has it's own x,x at say 0,0, then you could actually just draw it twice, or generate a new slide as needed. Hopefully this code will better illustrate the concept.
// Here, the 'tilegroup' is the same size of the canvas
function renderbg() {
tiles.draw(tiles.posx, tiles.posy);
if(tiles.posx < 0)
tiles.draw(canvas.width + tiles.posx, tiles.posy);
if(tiles.posx > 0)
tiles.draw(-canvas.width + tiles.posx, tiles.posy);
}
So basically, the idea here is to draw the groupings of tiles twice. Once in it's actual position, and again to fill in the gap. You still need to calculate when the entire group leaves the canvas completely, and then reset it, but hopefully this leads you in the correct direction!
You could always create your tillable image in canvas, generate a toDataUrl(), and then assign that data url as a background to something and let CSS do the tiling.. just a thought.
Edit: If you're having trouble drawing a tillable image, you could create a 3*widthx3*width canvas, draw on it as regular (assuming you grab data from the center square of data as the final result), and then see if you can't draw from subsets of the canvas to itself. Looks like you'd have to use:
var myImageData = context.getImageData(left, top, width, height);
context.putImageData(myImageData, dx, dy);
(with appropriate measurements)
https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas/
Edit II: The idea was that you'd have a canvas big enough that has a center area of interest, and buffer areas around it big enough to account for any of the shapes you may draw, like so:
XXX
XCX
XXX
You could draw the shapes once to this big canvas and then just blindly draw each of the areas X around that center area to the center area (and then clear those areas out for the next drawing). So, if K is the number of shapes instead of 4*K draws, you have K + 8 draws (and then 8 clears). Obviously the practical applicability of this depends on the number of shapes and overlapping concerns, although I bet it could be tweaked. Depending upon the complexity of your shapes it may make sense to draw a shape 4 times as you originally thought, or to draw to some buffer or buffer area and then draw it's pixel data 4 times or something. I'll admit, this is some idea that just popped into my head so I might be missing something.
Edit III: And really, you could be smart about it. If you know how a set of objects are going to overlap, you should only have to draw from the buffer once. Say you got a bunch of shapes in a row that only draw to the north overlapping region. All you should need to do is draw those shapes, and then draw the north overlapping region to the south side. The hairy regions would be the corners, but I don't think they really get hairy unless the shapes are large.... sigh.. at this point I probably need to quiet down and see if there's any existing implementations of what I speak out there because I'm not sure my writing off-the-cuff is helping anybody.
I have a canvas animation that sometimes redraws the exact same element over another (it is a long story why this is necessary) but it happens, and it happens often enough.
Now I assumed that drawing an element (using a context path and the stroke method) over an existing exact replica of the image should do nothing at all to my animation. Instead it draws over the past image and blurs all the sides (as if it didn't exactly draw at the same location.
Please let me know if there is a way to fix this
Thanks
This is happening because canvas strokes are anti-aliased. In a practical sense you're drawing some semi-opaque pixels over some other semi-opaque pixels, and where the pixels are overlaid their opacities are added together. I don't think you can (currently) force the canvas object to turn off anti-aliasing on strokes, so you may just have to live with it. Is it that big of a problem?
http://img813.imageshack.us/img813/303/canvasl.png
EDIT: I guess you could try using PNGs with transparent backgrounds for your markers, instead of drawing them with strokes. https://developer.mozilla.org/en/Canvas_tutorial/Using_images