We Keep Coding

Don’t scroll on a canvas to draw

I have a webpage to learn draw and add but I have a problem, when I use this in a Desktop browser it’s ok, but when use It in a mobile browser, I can’t draw because my page do scroll. I need that the mobile browser won’t do scroll when draw in the canvas. Thanks for your help.

I change the canvas for a new canvas with angular

Scaling KineticJS canvas with CocoonJS idtkscale

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!

HTML5 large canvas - moving and zooming whole content including background

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 ).

Prevent Object from Zooming

i'm writing a website on which everything should be able to be zoomed except of one object.
Is it possible to prevent only this object from being zoomed (typical pinch gesture on ipad, iphone)? (I know you shouldn't do this because zoom should entlarge everything on the page... but i don't know a way around.)
It has only to run on mobile safari.
Thanks for your help.

In order to do this, you need to be able to detect the zoom, which is not possible... at least, not directly. This post introduces a rather novel way of detecting the zoom level by using javascript to compare the width ratio of two divs on the page: one with a pixel-defined width and the other with a percentage-defined width. When the user pinches/zooms, the pixel width will not change, but the percent width will, so if you use javascript to detect the offset width of these two objects and get the ratio you can get the zoom. Then, if the ratio is, say, 150%, you can change change the width and height of you "fixed" object (using javascript) and multiplying each by .66666.
The major challenge you face here is that you cannot detect the moment of a zoom, so you'd have to use a setInterval() call to constantly be checking the ratio of the two test divs.

Resize and scale HTML5 Canvas and contents

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