I am working on an application that incorporates a drawing interface (like Paint or Photoshop) as an HTML5 canvas element.
I would like to be able to dynamically resize the canvas element and the pixel data on it to simulate zoom functionality. My thoughts are having some kind of a viewport which contains the canvas element. I could then resize the canvas and its contents inside of the viewport (which stays the same size).
How would I best implement this functionality?
You can do this very easily by seperating the display from the drawing surface by introducing another canvas. Create a hidden canvas using
var canvas = document.createElement('canvas');
Then draw your entire scene to this canvas. Then draw the contents of this canvas to another canvas that is actually visible to the user using the drawImage method (which may also receive a canvas instead of an image). If you want to draw your scene zoomed in, you can do this by making the source rectangle (the sy, sx, sw and sh parameters on drawImage) on the hidden canvas smaller, when drawing it to the visual canvas. This will give you the zooming effect.
However, if you completely redraw each frame on your canvas anyway, you may also simply have a look at the scale method of the canvas object.
I'm having success using transform: scale() on a canvas element and its contents.
However in situations where the canvas element needs to be brought in with an iframe and the transform: scale happens on the iframe it works on safari but not mobile safari. Relevant link below
https://stackoverflow.com/questions/11265483/inconsistencies-when-transform-scale-on-iframe-containing-canvas
Related
I am looking for an alternative to shrink my images. Until now I shrinked my images with a canvas method like here: Resizing an image in an HTML5 canvas
The problem is that this method is not supported by older Browser-versions, so I am looking for a method which shrinks the image (not just scale it) without Canvas.
Is there another solution or is it impossible to do this without Canvas?
I just do not set a width on height on an image and inmy css i wil have img {max-width:100%}
I'm building a authoring tool in FabricJS which is meant to export something for android devices. It's decided that I will support only 6/9 screen ratio (other screens will get black borders).
My problem is that I open the page on my pc, add and edit some elements and export ( using the fabricjs serializer ) and then I open on a laptop (different display size), the canvas gets resized correctly (with some js magic) but the elements are still at the same location and same size as on the big display
.
The problem is that FabricJS does not create elements relative to canvas size.
I can write my own export/load functions, but it feels wrong because each element has width, height, scaleX and scaleY. Using the handles changes the scale for some reason. This leads me to think that there is something like a canvas scale, but there is not.
Am I missing something? How does one go about exporting and then opening on a different screen, but maintaining the canvas ratio and having elements relative to the canvas size.
I got my KineticJS game working inside CocoonJS quite nicely, except scaling the canvas. I have 1024x768 canvas, which is great for iPad 2. But for iPad 4, due to retina screen, the game takes only 1/4th of the screen.
CocoonJS says this about the scaling:
CocoonJS automatically scales your main canvas to fill the whole screen while you still
continue working on your application coordinates. There are 3 different ways to specify how
the scaling should be done:
idtkScale
'ScaleToFill' // Default
'ScaleAspectFit'
'ScaleAspectFill'
canvas.style.cssText="idtkscale:SCALE_TYPE;"; // The SCALE_TYPE can be any of
the ones listed above.
I have tried this adding this:
layer.getCanvas()._canvas.style.cssText='idtkScale:ScaleAspectFit;';
But it is not working. Any idea how to get KineticJS created Canvases to scale in CocoonJS?
When dealing with making a canvas object full screen if on mobile. In CocoonJS this feature is out of the box. So we patched the code to set
document.body.style.width
and
document.body.style.height
These are DOM related and not supported (nor needed on full screen mode). Also code related to canvas style and position was patched, since it isn’t needed.
For now on, the correct way of getting screen size is
window.innerWidth
and
window.innerHeight
To make your Canvas objects full screen, set
canvas.width= window.innerWidth; canvas.height= window.innerHeight
One thing you must know about CocoonJS is that you don’t have to change your canvas size to make it run fullscreen. CocoonJS will up/down scale your canvas and have correct touch coordinates sent. You could choose how you’d like your canvas to be scaled, either keeping aspect ratio or not, and also if you want to have no blurring filter applied to the scaling operation, which comes handy for games relying on pixel art. Refer to the official CocoonJS Wiki pages to know how to control scale operations.
REFERENCE
http://blog.ludei.com/cocoonjs-a-survival-guide/
Okay, I found an answer to this question myself and since there are so many up votes, I want to share the solution.
The solution was to comment some code within KineticJS and then add the CocoonJS scaling to the canvas creation.
Comment these lines (not all at one place):
inside _resizeDOM:
this.content.style.width = width + PX;
this.content.style.height = height + PX;
inside setWidth of Canvas:
this._canvas.style.width = width + 'px';
inside setHeight of Canvas:
this._canvas.style.height = height + 'px';
Add this inside Canvas prototype init:
this._canvas.style.idtkscale = "ScaleAspectFill";
This does the trick for me. Now what I do is I calculate the correct aspect ratio for the canvas and let CocoonJS scale it for me. Hope this is as useful for others as it has been for me!
Does anyone here have a good example of panning using Easeljs? I am actually animating a ball inside a large canvas, about 5200x7400. I am able to center the ball on the screen using a div that contains the canvas, setting it to overflow scroll and then using the function tick() to set the scrollTop and scrollLeft of my <div>.
I just want to do this using pure canvas because when I try to use my site on Android 4.0, scrollTop and ScrollLeft don't work.
Is there a reason you are using such a large canvas, instead of just moving the contents within the canvas? A big canvas like that will have quite a huge impact on memory and performance - whereas translating a Container inside the canvas is fairly insignificant.
My final is goal to implement a app like http://www.crystal.ch/abb/power_systems_landscape/ using html5.
As you see, we may need a large(2000*600) canvas, but im not sure.
Can anyone give me idea just for following behavior of above link ?
whole canvas content including background can move left-right smoothly using mousemove and mousedown operation
whole canvas content including background move left-right smoothly according to power system selection
Zoom in zoom out
Fade out effect like plus iconic circles
Any kind of idea would be appreciated.
basically you want something like this
<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;>
<canvas id='canvas' width='2000' height='600'></canvas>
<div>
then when you want to scroll you would do something like
document.getElementById('wrapper').scrollTo(x, y);
and zooming would be
document.getElementById('canvas').style.width = 2000 * zoom;
document.getElementById('canvas').style.height = 600 * zoom;
You can play around with setInterval and what not to get the scrolling and zooming nice and smooth, but that's definitely be the fastest way to get those effect on a large canvas since there's no redrawing involved.
I recommend if you are working in 2D canvas js, that does not utilize zoom or move the canvas element, or any other html elements, you better write an algorithm within the draw function. Zoom is the death of quality and speed and can be complex from zoomin to zoomout (Don't forget all visible data on canvas is just a image).
I managed to upload a picture of 13000 px and multiplayer avatars to show all of an algorithm within the draw/update functions.
If you use 2 canvas you can crop from code big images and then composite to the visual map.
If you have too much image width > 3000 ps must be divided by lower level (on iOS devices for image ~> 3000px comes to be negative scale - image comes smaller ).