HTML5 large canvas - moving and zooming whole content including background - javascript

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

Related

Using image-rendering: pixelated; causes moving image to ripple a vertical pixel line

I'm attempting to create a simple javascript canvas game in a desktop app using an electron. I'm using pixel art, so in order to keep my pixel art images to stay in good quality as they scale, I am using the following CSS:
canvas {
image-rendering: pixelated;
image-rendering: crisp-edges;
}
Unfortunately, as the player controls the main sprite to make it move left and right, a strange ripple effect shifts a line through the sprite as it moves.
Example: https://imgur.com/a/MUCjv4W
If I only use crisp-edges, this problem is fixed, but obviously a lot of quality is lost from the art.
Is there anything I can do to prevent this effect and just keep each pixel in its correct place?
If you use this line of JavaScript, you should be able to remove all of that CSS. This will disable the smooth upscaling of images and keep the pixelated quality.
Replace context with your 2D canvas context.
context.imageSmoothingEnabled = false;

Android Tablet paper.js on zoomed canvas

I got problem on Android Tablet (Galaxy Tab 2). When having a big image, and using paper.js to draw paths on it, everything is fine, but when I zoom the image (only if it is big enough), paper.js stops drawing paths on a certain width and height... the image on canvas is still being displayed (background-image with width and height set to 100%), but it seems that paper.js is unable to draw farther than some width and height. Any idea what is going on or how to fix it?
If something isn't well explained, please give me feedback. I really need to get it working. Today.

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 Canvas using easeljs pan

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.

Scaled Transparent PNGs lose anti-aliasing after jQuery animation in Webkit browsers

I have a script that lays out these circular icons on the map, you hover over them, they spring up, text appears, etc. The icons are scaled relative to their position on the map, ie, the distance from 0 on the y-axis. I've tried to set the scale through CSS's width and height attributes and through the html width & heights on the img tag and still have the same problem:
Basically, in their dormant state, such as when the page is first loaded, or the user flicks between tabs, the images (trans' PNGs) are anti-aliased. However, when the hover() function, and thus the animate() function, is invoked, the images suddenly become jagged and horrid. I've noticed that this behaviour doesn't exist in firefox but does in safari and chrome. I don't know whether this is to do with Webkit, jQuery or just javascript itself but maybe someone could shine some light as google resulted in nothing. Any thoughts? :)
Please also note that the bottom left and bottom right icons look fine in both attached screenshots- they're unscaled ones!
Thanks a lot :)
Matt
i can only guess on this, but my assumption is that gecko and webkit use different scaling algorithms for images. thus it has nothing to do with javascript, jquery or png at all.
in fact, the image still has antialiased edges even in the webkit screenshot. (you see that when you zoom in)
the border is just messed up which is usually the result of a bad scaling algorithm.
try the following to confirm this assumption:
<img src="youricon.png" width="90%" height="90%">
and compare the result in the two browsers. you should see the same problem.
possible solutions:
make a smaller version of the image and replace image with the smaller one on hover instead of scaling it.
use a scalable vector graphics format like SVG for your icons.

Categories