I know IE6/7 does not natively support canvas and so I'm using excanvas.js for IE browsers. I have a script which draws two images onto a canvas tag.
Eg.
var canvas = $('.map_container')[0];
var context = canvas.getContext("2d");
context.drawImage(images.national,getPositionOrScale(0),getPositionOrScale(0),getPositionOrScale(images.national.width),getPositionOrScale(images.national.height));
Now I call context.drawImage on two different images and both images are drawn but when I'm in IE6/7 and I go to print preview or print it. It only prints the last img which was drawn.
Any ideas why it cant print the full canvas as is?
I figured out that they get layered on top of each other. I'm sure this is ancient history for you, but if you put one of the two in a div with a height set to the size of the canvas, you should be able to see both.
Related
I am trying to create a canvas in html that the user can draw on. It works fine with any mouse-device like a pc or max. It also works fine with a non-ios touch devices (like an android/windows tablet). But with ios-touch devices (like an ipad or iphone) it doesn't work. When you try to draw, it scrolls the page while you draw. Any idea how to disable this scrolling action on ios devices while drawing on the canvas?
Here is an example of a html drawing canvas http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ Try and draw on one of the canvases on an ipad or iphone, BUT NOT THE FIRST DEMO, for some reason the first demo works but none of the others work.
I got it working by using onTouchStart, onTouchMove, onTouchEnd.
For onTouchMove, you'll get an array of changedTouches. For pen usage, the first one will do since there won't be multiple touch events at a time.
const position = { x: event.changedTouches[0].pageX, y: event.changedTouches[0].pageY };
When I try to rotate bitmap image with createjs (not resize, but just rotate) the bitmap image gets jagged in Chrome. In Firefox it is fine.
Here is my code:
var backCard = new createjs.Bitmap(assetsLoader.getResult("back"));
backCard.rotation = 24;
stage.addChild(backCard);
stage.update();
Any ideas on how to fix this ?
I don't know if you want to prevent or enable antialiasing on Chrome, since for me Chrome gets rotated bitmaps antialiased and firefox don't, so I'll talk about both things...
Enable antialiasing
There's no way of doing this natively, but you can create a workaround if you really want to force antialiasing: adding a blur filter in really small amounts to rotated images. But keep in mind that blur is a really expensive filter that you should avoid using, but in case you use it, you'll need to cache the bitmap after applying the filter to reduce CPU usage.
backCard.filters = [new createjs.BlurFilter(2, 2, 1);]; // 2 is blur radius, 1 is blur quality. More quality means more expensive blur.
var bounds = backCard.getBounds();
backCard.cache(bounds.x, bounds.y, bounds.width, bounds.height);
Prevent antialiasing
I think there's no way of doing so yet too, but you can use the next version of EaselJS which allows you to define if objects will be antialiased for the stage, because of WebGL. Note that if WebGL isn't supported on the user's browser EaselJS will fallback to HTML5 Canvas, which will still have antialiasing.
When I add a 775 x 775 image to a fabricjs canvas and resize it down to around 90 x 90, the image greatly loses its quality.
But if I add that same image as an <img/> and scale it down, it retains its quality.
Why does the canvas image become so low quality? How can I make the canvas image retain it's original quality like the <img/> does?
It should probably go for a comment, but unfortunately I am new here and I can't add comments.
However, to me it looks like antialiasing issue. Canvas is just bunch of pixels - it's up to you whether you do some antialiasing or not. Browsers however do some antialiasing on picture scaling (see here Disable antialising when scaling images).
This question might be a duplicate of:
Html5 canvas drawImage: how to apply antialiasing
HTML5 Canvas and Anti-aliasing
Hope it helps.
We have a website that used HTML5 canvas and KineticJS to scale and resize and rotate an image on top of another image and then save them together as a new image. For some reason it does not show up correctly in IE9. It works perfect in FireFox, Chrome and Safari, but in IE9 the only thing that does not work is the rotate tool. Which is set in 15 degree increments and works by dragging the slider either left or right and it rotates the images slightly by 15 degrees depending on the direction you drag it.
Could it not be working because IE9 is not supporting the html5 tag..I am confused.
I am trying to recreate a page flipping type animation in HTML5 using canvas. The animation is based on ideas from this page. But that's not really important. The problem I am having is that using the 'source-in' composite operation is not giving me the results I expect and would like clarification as to why. I think it only works on chrome, not working on FF 3.6.
The black rectangle is supposed to act as a 'mask' for the page being turned over. All I want to see is the turning page in the areas where it overlaps the mask. The problem is the entire black rectangle is drawn, not just the area where they overlap.
I know HTML5 isn't really being used yet, I'm just experimenting for my personal site and curiosity. Any ideas would be greatly appreciated.
Canvas Compositing support was broken and might still be incomplete in some browsers.
Compare the images here
with the actual rendering in your browser to see what works in which browser right now.