I'm creating an HTML 5 game using the <canvas> and JavaScript.
In my canvas I'm loading high resolution images. In each Minute there will come some objects to this canvas. If user clicks on it. It'll be removed from the screen.
My issue:
I'm using clearRect() function for clearing the canvas. And again re-draws all images. Is it necessary that each time I re-draw the entire content ? Is there any option to re-draw that particular area ?
When I used the clearRect() to clear the exact area of that object. The background image also got removed. Is there any way to save the particular portion of background image and draw that portion with this saved image ? (Because my objects are moving on the canvas, I need to retreive the image data dynamically)
I'm new to WebTechnology and HTML 5. So please help me. Thanks in advance
There are a few canvas layer libraries that adds support for the layers:
CanvasLayers
CanvasStack
Think of the canvas as a painting, it is not possible to remove a "layer" of content once it has been applied. You can specify a portion of the canvas to clear using clearRect(x,y,height,width), but you will always need to redraw the background of what you deleted. The drawImage() function takes arguments to draw a specific portion of an image in a specific location, but perhaps more along the lines of what you are looking to use is imageData.
I suggest you do some reading up on the canvas here Mozilla Dev Network: Canvas
Related
I have a lot of images to draw into canvas, what I wanna do is do draw stuff one time, and handle every drawn image's visibility in order as slider.
So, is there anyway to get the reference of every image, and then set property like hidden=true|false on it?
No, html5 canvas does not "remember" where it drew your images so you cannot later reference them to show / hide them. You will have to clear the canvas and redraw the images in their newly desired positions.
I have HTML5 canvas drawing app and I need to change it's background color when user clicks a button.
Background-color on canvas is working on user-side, but user can save the image to server and I'm exporting canvas data using canvas.toDataURL('image/png'). Problem is, background color of canvas is not included, it only sends data user drawn.
I thought about putting big retangle over whole canvas, but that overwrites all drawings already made. Any ideas?
If you want to add the background after you already have drawn something on the canvas, you could add another canvas with the same size and with "display:none" - then, before sending the image, just fill the temporary canvas with your main canvas element's background color from the CSS, then draw the main canvas onto the temporary one.
Finally, send to server the composite from the temporary canvas rather than the bitmap of the main canvas that has the transparent background.
You're not showing any code, but: You need to draw the background using it's context. Setting the background using CSS will as you already discovered not include it when you extract the image.
Canvas is simply put two parts: the canvas element itself and its bitmap. Using CSS affects the element but not the bitmap. Therefor, you need to update the bitmap usually through its context or using the pixel buffer for it to become a part of the bitmap.
Do the following:
At initialization, draw the background using for example fillRect()
Draw your remaining graphics on top
Extract using toDataURL()
Usually when an image is being resized in javascript or css3(using background-size), it will stretch an image from the center point. I need an image to be stretched and distorted from a single point that could be anywhere. It's going to be dynamic so I don't want to resort to using separate images.
Here's a pic that illustrates what I mean:
Hopefully there's an answer out there!
You have a few options to achieve this effect.
The "correct" way would be to use canvas to draw the image: Skewing images individually using canvas
Another way would be to fake the effect using the CSS transform skew.
http://developerdrive.com/demo/skewing_elements/skewing_elements.html
You would do this inside an element with "overflow: hidden" to make it look like a background image.
It's not even clear to me what you want from the image you're linking too. Do you want it distorted or not? And is the distortion uniform?
I'm going to guess whatever you're doing can be approximated by drawing an ever decreasing set of (or maybe rectangles) clipped from the center of a some image and drawing them onto a "canvas" (think generic term not html5 term) given new coordinates for the center of each clipping. There may be a faster way to draw this than redrawing parts of the image multiple times, it's just how I visualize it possibly working.. at least maybe in some mathematical sense.
I have a Canvas element with inside an image ( the canvas has the same dimension of the image), i want to crop this image using a selection rectangle! For my project i use the javascript's framework JQuery and i'm searching a plugin that implementing a custom selection rectangle on canvas!
Anyone know one plugin that do this (I founded a lot of plugin that implements this functionality but only on elements)?
If no, what is the way to implement a custom rectangle on Canvas elements?
I hope in yours answers!
did you tried using Fabric.js to generate rectangle on Canvas ?
Usually, everything that is drawn onto a canvas will automatically change the canvas content. If you want to draw a rectangle with the mouse without destroying the underlying canvas, the usual way is to add an additional (temporary) canvas on top of the original canvas. The new canvas has a transparent background, so the underlying canvas is fully visible.
Now you draw the rectangle on the temporary canvas (which has the same dimensions as the origianl) and store the coordinates of the selection to apply the crop process on the original.
Please see my example here: http://jsbin.com/apitak/4
I am experimenting with canvas as part of my HTML5 introduction. This constitutes as assignment work, but I am not asking for any help on the actual coursework at all.
I am trying to write a rendering engine, but having no luck because once the image is drawn on canvas it looks very distorted, and not at the right dimensions of the image itself.
I have made a animation engine that loads images into an array, and then iterates through them at a certain speed. This is not the problem, and I assume is not causing the issue as this was happening when I drawn an image to the canvas without the animation component.
I think this is natural behaviour for images to be scaled/skewed when the window is resized, so I conquered that by simply redrawing the whole thing once the window is resized.
The images I am using are isometric, and drawn at a pixel level. Would this cause the distortion? It seems setting the dimensions on the drawImage() function are not working are all. I am using JavaScript for the manipulation and rendering of the canvas.
I would normally try and work it out myself, but I do not have any time to ponder why because I have no idea why it is even scaling/skewing the image once it is drawn on the canvas. I cannot share the code for obvious reasons. I should also mention, the canvas's dimension is the total width of the viewport, as I am developing a game.
My question is: Has anyone encountered this and how would I correct it?
Thanks for your help.
Seems that you set dimensions of canvas with css.
Try defining them as html attributes. Example:
<canvas id="test" width="100" height="100">Fallback content</canvas>
Edit:
It will set width/height of canvas element to 100/100 pixels.
Yes, the problem was I was setting the canvas's dimensions with CSS. The canvas element is treated like an image, and I was actually scaling the canvas with CSS not resizing it. Thanks for the help. – Mark just now