I have a CANVAS element that can be quite wide, depending on the actual content. For printing I'd like chrome/firefox to automatically tile the canvas image across multiple pages (horizontally first, then vertically).
The vertical tiling works fine, the print preview splits the canvas across two pages.
There doesn't seem to be any horizontal tiling at all.
Any ideas?
The default printing will always cut the canvas off when it is too wide. No getting around that.
However...
Replacing the original canvas with small vertical slices of the original canvas allows the browser to page break at roughly the correct location.
Related
I have a mapbox project in production where the street map the user customizes (location, zoom, and text) will ultimately be printed on a surface which has rather small dimensions (3.5" x 2.25" at 600dpi. keeping in mind that the zoom level affects the visibility of the different street types, The problem I am running into is this:
Since the canvas element renders at 72dpi, this means that in order to get an accurate representation of how the map will print, I actually have to make the map's div container real size # 72dpi (252px x 162px) which is of course quite small and far less detailed than the map will look when it's printed at 600dpi
In order to allow people to interact with the map at a reasonable size on the screen, the cheap solution is of course to scale up the canvas using css transforms: i.e. #mapContainer {transform: scale(2.5)}. However this results in a very pixelated map since, unlike svg vector graphics (as seen in the text and graphics overlays in the images below), the browser does not re-render the canvas when it scales up.
Unscaled canvas
Scaled Canvas
I have spent a lot of time searching for a solution to this problem, and at best it looks like I may have to utilize a method where I pull in mapbox data into tiling services like nextzen with data visualization libraries like D3.js but id like to make this one last ditch effort to see if there is any way to trick the browser into rendering this element in a higher size dpi without changing the map bounds or zoom.
I suspect the answer to this lies in a similar vein to this stack overflow question Higher DPI graphics with HTML5 canvas However when I attempt it, I get a null value for var ctx = canvas.getContext('2d') since the mapbox canvas is "webgl" not "2d"... looking into the "webgl" method of resizing a canvas for higher dpi here: https://www.khronos.org/webgl/wiki/HandlingHighDPI but I really am having a hard time understanding how exactly to redraw the canvas after the resize.
I want to make exact 1-pixel thick line without distortions. (means not appeared as 2-pixel lines or 1.5-pixel lines, etc) Because it seems like the Canvas just can't stand Pixel Perfect at times.
It is also depends on CanvasScaler setting, make sure that screen/canvas output is exactly at scale 1x.
Confirm that canvas final scale is all 1x
Also confirm that your displaying game window has 1x scale so that 1 pixel show up nicely too!
(View full unscaled image in another window if sprite in above image appear jagged)
For canvas scaler setting, if you use it in other mode such as "Scale with screen size", and its reference resolution did not match current game window, it will result in non 1x scaling.
If scale is non uniform, jagged or blurry line will start to appear on canvas.
Notice the middle sword sprite.
Canvas' pixel perfect tick box helped nothing so far.
Actually, sorry. Canvases try to respect screen pixels when scaling with PixelPerfect set to true.
The solution was pretty easy - just setting PixelPerfect to false. I got so used to set it to true (because of the UI style I was going for before) that I didn't even consider turning it off. I guess that's mainly due to its name - Pixel Perfect.
xD
I'm developing a little videogame in which I have an infinite background image which moves horizontally. The image obviously is not infinite, it just finishes the same way it starts, so if I concatenate the image with itself, it seems is infinite.
The problem I'm having is that in the place where the two images join, a vertical black line appear. Looks like is not joining them in the exact position and I can see the black background.
I thought it was because the width of the images were not integers, but even if I superimpose one image over the other, the black vertical line still appear.
Any tips please?
What you are trying to do is called tiling. The image should be inherently 'tile-able'. To do this, put two copies of the image side by side, edges flush with each other and see if they are seamless.
Now then, to make things work in OpenGL, the simplest way might to make the quad (i.e. the mesh) holding your background pretty large and map this texture to a small part of this mesh (so that the image itself doesn't look stretched). Use the GL_REPEAT flag when texture mapping so the image is tiled across the entire large quad.
I've been provided with 8 individual images (top left, top, top right etc) for a border around the main (fixed width) content box. If I was given a single image, I'd use border-image.
What's the best way to use the 8 images? Divs with absolute positioning? Or is it such a pain I should just combine them into one?
What's so hard about combining the images into one? It has numerous other advantages, like reducing the number of HTTP requests the client needs to make, for example.
An alternative is to use CSS3's multiple background image feature, where you'd set each image as a layer in your box.
Eric Myer used a technique whereby (just to explain technique) the image was a little circle. Then, that was the background graphic in four separate divs each abs positioned in the corners of a containing div w/relative position. Background position was changed for each and a regular border was used for the straight lines in effect getting rounded corners. The circle had to be filled with white or whatever bckgrnd color you used.
This way, one could expand. You still need to have the height expand should changes occur, right?
I'd make one for the top and bottom and a third that repeats on the Y for the middle, that way your box will expand if content is added. Height that is.
I am a complete novice when coming to using Flash but I am looking to create an animation similar to the line into text animation at:
http://www.louisebradley.co.uk/fl/
where instead of running from the top of the screen I want the line to effectively stretch across my homepage horizontally.
I have created an animated gif that does the job but it takes a long time to stretch across 974 pixels in width, and if the frames are reduced it takes away any smoothing effect. I did this in photoshop by simply creating 20 or so frames, each increasing the size of the line by 60 pixels until the full page is covered.
Would I be better off creating the effect in Flash? And if so, where on earth do I start!! Would tweening do this, and how I would I implement it?
Thanks in advance for any help!
I am assuming you are talking about the line to the left of the main navigation? If this is the case, this is being done using a mask that is tweened. You can simply draw out the shape you want "wiped" across the screen and than on the layer above it, draw a box over the shape to be animated. Right click the layer the box is on and select "mask". You can now tween the mask to move from right to left over the shape you drew and it will appear to wipe over. Just remember, whatever the mask is currently over, is what will show through from the layer that is masked. Think of the mask as a window. This can be completely done without actionscript and only using the timeline.