we encountered a (possible) bug regarding the MarkupExtension that seems to only happen in Safari (MacOS + Mobile).
Our situation is that we make a screenshot of the viewer with the built-in functionality and then use the markupExtension.renderToCanvas method to render all currently drawn markups on top of the screenshot on the canvas before exporting it as a blob again.
The same idea is basically outlined in this article as well: https://forge.autodesk.com/blog/screenshot-markups
Now it's the case that this works in Chrome, Firefox and Edge, but for all Safari based browsers, the markupExtension.renderToCanvas method seems to not render any existing markups to the given canvas, no visible errors thrown.
Are there any known issues or are we doing something wrong?
I try to keep it short, so this is the just outline of our code that handles the described task, omitting the (successful) screenshot part:
const canvas = document.getElementById('someId');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, width, height);
ctx.drawImage(screenshotFromViewer, 0, 0, width, height);
markupExtension.renderToCanvas(ctx, () => {
// callback: markups should be rendered to canvas
});
Related
I'm working on drawing eyeDropper icon on a canvas where the user clicks. now it worked fine on Google chrome, but while testing it on FireFox it's not working as expected.
the code for drawing image:
function showPoint(){
base_image = new Image();
base_image.src = '../dfe/svgs/target.svg';
base_image.onload = function(){
parent.targetISshown = true;
context.drawImage(base_image, parent.currentMouseClickPosition.x - 10, parent.currentMouseClickPosition.y -10, 20, 20);
}
}
now this is image viewed on Google Chrome:
and this is the image viewed on FireFox:
i tried to find out what is the problem with fireFox and images on canvas, i found that there is a different way to draw images on FireFox.
any helps?
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.
I have a created a d3 canvas like below.
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 1000)
.append("g").attr("transform", "translate(150,150)");
and further added elements to it to create a plot.
I am facing an issue while rendering the it in Google Chrome browser.The graph is displayed towards the left than expected and hence is cut by the panel border.
The same code is rendered correctly in Mozilla Firefox.
Is there a difference in the way the canvas coordinates are calculated in both the browser? Or is it that transform and translate is misbehaving in chrome?
Please suggest a solution.
As we can see in this example from the library, the circles are changing their line width and are very thin when they are close. This used to work fine.
My version of Chrome is:27.0.1453.93 and I am running it on an OSX 10.8.3.
How can we fix that?
In the function programStroke(), set context.lineWidth = 1.
three.js r.58
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.