We are facing the following challenge: We are creating a behavioral experimentation library, which both needs to be able to show random shapes as well as display forms.
For the shape drawing part we use pixi.js, and even though we know it can also use canvas2D, we prefer it to use WebGL as its rendering engine, which uses the 3D context of the canvas. Pixi however doesn't really have the ability to draw form elements on the canvas, so we decided to use Zebra/Zebkit for this, but zebra can only draw to 2d context.
According to many sources, it's impossible to use 2D and 3D context simultaneously with a single canvas, or switch from 2D and 3D context (and vice versa) after the canvas has been initialized. We therefore decided to create 2 separate canvases, one with a 3D context to use with Pixi.js, and one with a 2D context to use with Zebra/zebkit. When necessary, we switch the canvases by showing one and hiding the other.
This works quite well when the canvases are integrated in the web page, but less optimal when we want to display the experiment fullscreen. It is very difficult to switch from one canvas to the other in fullscreen, because you can only choose one DOM element at the time to be displayed full screen, and weird stuff happens when you start hiding the full screen element to show another. My question is: what would be the best approach to tackle this problem? I already have several in mind:
Put both canvases in a container div, and display this container fullscreen instead of the canvases itself. I don't know if this is possible, or if this will have any negative side effects compared to showing a canvas in fullscreen directly.
Render the zebkit canvas on top of the pixi canvas by making sure it is on top of the overlay item, as suggested in How do I make a DIV visible on top of an HTML5 fullscreen video?. This situation seems very hacky though, and I smell inconsistency issues between the various browsers that are around already.
Use the method described in How do I make a DIV visible on top of an HTML5 fullscreen video? to render normal HTML form elements on the pixi canvas. I predict there will be some resolution/rendering problems to tackle though, because you don't have the degree of control over the pixel raster as you have with canvas items.
Related
I'm new to the canvas element of html5. I'm specifically wondering when you should put an existing img element inside of a canvas element.
What's the benefit or appropriate use of this?
I've been reading Dive into HTML 5 and didn't quite get what I was looking for in their concluding statement on the topic of canvas:
The simple answer is, for the same reason you might want to draw text
on a canvas. The canvas coordinates diagram included text, lines, and
shapes; the text-on-a-canvas was just one part of a larger work. A
more complex diagram could easily use drawImage() to include icons,
sprites, or other graphics.
An image tag is best used for a static piece of imagery.
Canvas is, to quote the HTML5 working group, "a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly."
So, you can slap an image onto a canvas, but that is probably to augment some other piece of work you're creating, like a chart or a game graphic.
UPDATE AFTER YOUR UPDATE
So, if you want to create a really complex chart that tracks stock performance in real-time, you could use the canvas to draw the various bars of the graph, and then also use drawImage() to place company logos on the canvas to indicate which bar belonged to which bar.
Where img does the job, use that. canvas is a very powerful tool indeed, but:
While it's supported by a large portion of browsers today, img is still much more widely supported.
If you need to cater to users with JavaScript disabled, canvas cannot be used; canvas needs JavaScript to operate, whereas img doesn't.
That said, if you need something that only canvas can do, feel free. For example:
Do you need to load an image and then let users warp it or draw on it? A canvas would do quite nicely there.
Do you need to dynamically draw some charts and graphs? canvas would work well there, too.
When you have no need for the more advanced capabilities of canvas, though, and just need to display images, img is the most obvious and compatible choice.
I'm seeking some tutorials, how I make canvas or SVG (not sure which) images in an isometric map for a RTS game purpose. The images should only be clickable on the visible part, otherwise the user should be clicking on the background image. It can either be done by auto detecting transparent areas of PNG or from color overlay. I have no idea which is best.
Thanks.
If you won’t be changing the perspective of your scene, then I would go with SVG because they are DOM elements (clickable out-of-the-box) and you can limit the click area to the non-transparent part of the element. A very good SVG library is RaphaelJS.
The canvas is a different kind of animal. The vectors/rasters you draw on a canvas are not “retained”, meaning unlike SVG, you cannot instruct the box you just drew on the canvas to move. Instead, you are in charge of redrawing that box where you want it. After you draw everything on your canvas, it is basically becomes a big bitmap. If your scene’s perspective will be changing, you might need what canvas does best: speed and flexibility. Using matrix transforms, you can do 2D movement, rotations, scalings and skews. Since you are in charge of the transformation matrix, you can also simulate 3D movement. If your users have non-IE browsers, you also have WebGL which is a full 3D imaging system. With this power comes complexity, so you will probably check out the many game development platforms available for canvas.
With both elements, you can use websockets to do your RTS (of course degrading to long-polling for browsers that don’t support websockets).
I'm working on a 2d tile based HTML5 canvas application and I would like to know what kind of special effects I can apply to the images as their being drawn ( context.drawImage(...) ). The only trick I've come across is modifying the canvas.globalAlpha value. This leaves some color from the previous frames, creating a blurring or dazed effect if things on the canvas object are moving from frame to frame.
Is there something for rendering images that is comparable to setting the context.fillStyle to an ARGB value for primitive shapes?
Is there a multiply mode? ie: multiply the image pixel color by the destination color. This could be used for primitive lighting. (I've toyed around with context.globalCompositionOperation but didn't find anything interesting)
Are there any other cool effects you've come across?
NOTE: I don't want to use WebGL for this application, and it's a game. That means it's realtime and I can't modify each pixel with javascript code because that takes too long. (although I could probably do that when the player dies and nothing is moving on the screen anymore)
Canvas doesn't provide any predefined effects.
To manipulate the image shape you can use matrix transformations.
To manipulate the image pixels and colors you should use getImageData method - http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation.
Then use google to find algorithms to apply some effects like swirl, blur, emboss etc.
I want to start a project where I need to draw diagrams consisting of rounded rectangles connected with lines and a JavaScript action when I click some elements. This needs to work in all modern browsers.
Both SVG and HTML5 Canvas seem to be able to do this so I wonder what would be best.
Also I don't want to reinvent the wheel, so if there are libraries that do such things I would like to know; I took a look at Raphaël and some other JavaScript drawing libraries but they don't give all the functionality I need. In Google's API there is such a tool but it is very limited.
Use SVG because—as a retained-mode drawing API—you can attach event listeners directly to specific elements, and change properties of specific elements and have the page magically update. Further, as a vector-based format, it is resolution-independent.
HTML5 Canvas, by comparison, is a non-retained-mode (aka immediate-mode) drawing API; every pixel you draw is blended with all other pixels on the canvas, with no concept of the original shape. Further, as a raster-based format, you would need to do some extra work to get the drawing commands to adjust for different display sizes.
In general, you should use Canvas if and only if you need:
Direct setting of pixels (e.g. blurs, sparkly effects), or
Direct getting of pixels (e.g. reading a user's drawing to save as a PNG, sampling portions of the image to detect visual overlaps), or
massive number of 'objects' that won't move much or track individual events (SVG can be slow to redraw with thousands of objects).
Note also that you don't have to choose only one or the other. You can draw SVG onto canvas. You can include bitmaps (images) in SVG. You can even include HTML5 Canvas in SVG via <foreignElement>. You can have a single HTML page with multiple layered canvases and SVG elements with transparent backgrounds, intermingling the output of each.
I wrote a paint application using the HTML5 canvas element.
Now I want to give the user an option to zoom in and out while painting.
How can I do this?
There are a few ways. It really depends on what you're looking for.
You could do it by scaling the entire context, as in ctx.scale(2,2), and then redrawing everything at this larger scale. Several things drawn, like paths and text, will scale gracefully. To accomplish this you will need to keep good track of everything drawn so far.
Another way is to take the entire canvas and draw it back to itself. This requires a temporary canvas because the operation is really: Draw to temp canvas, clear main, draw back to main scaled.
Another way is to use CSS transforms to merely zoom the canvas itself, which will make the image blurry (its zoomed!) but does not require changing any of the pixels already on the canvas.