I've noticed HTML5 Canvas adds slight discoloration on certain browsers when using drawImage. I know it happens on Google Chrome and Mozilla Firefox. Internet Explorer and Chrome Android seems to work fine. What is causing this? My context's globalAlpha is 1.0. The discoloration is usually 1-5 RGB values off. Note that there are no problems when using Canvas' fillRect, etc.
Upon further inspection, looks like this is more a problem from the browser combined with Photoshop exported images, and is irrelevant with the Canvas itself.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "http://i.imgur.com/NTRjnRb.png";
img.onload = function(){
ctx.fillStyle = "#FFF";
ctx.fillRect(0, 0, 450, 800);
ctx.drawImage(img, 0, 0);
}
</script>
This is because of color management and is not related to canvas but to the image loading itself. When an image is loaded into memory the browser will apply monitor ICC as well as embedded ICC if any, to the color values. When you next draw the image to canvas the color values of the image is already set in stone.
Chrome and FF support ICC profiles directly and will apply using both image ICC (if any) and monitor ICC profile.
Internet Explorer v9-11 supports ICC through the Windows Color system.
In addition to ICC there is gamma correction which also may affect the actual color values in the out end. If that wasn't enough then there are different versions of ICC profiles, ie v4 does not have quite the support it should have by now.
ICC profile version test results:
ICC support: v2 v4
Firefox 34 X -
Chrome 40 / Opera 25 X -
Internet Explorer 11 X X
As you can see IE supports both version 2 and 4 (although through Windows own color system) which can explain the situation if you save an image with ICC profile version 4 (I cannot test Android Chrome at the moment).
To save out PNG without ICC from Photoshop use "Save for web" and tick off ICC embedding.
For a more in-depth (sub-link from the test) you can see this article:
Web browser color management guide.
ICC support in Firefox
ICC support in Chrome
ICC support in IE9+
Related
TL;DR Canvas Elements not showing up for some sites and does show for others. How can I have it show consistently?
I have a 2021 Macbook Pro with an Apple M1 Pro processor. I use Chrome Browser v105.0. On some sites that use the HTML5 canvas element, I am able to see stuff being drawn on the canvas but for other sites, the canvas element is clearly there but nothing is drawn on it. I tried playing with the chrome://flags that have to do with GPU and Canvas by switching them on and off to see if I can get Canvas Elements showing up consistently and now they do show for the sites that it was not working for but only after refreshing the page.
Has any one experienced this before and if so, is there a way that I can have canvas elements show consistently without all the workaround?
I am experiencing the same issue with HTML5 canvas on Chrome M1, seems to be related to Apple Silicon (M1) + Chrome 105 because it's working fine on Chrome v105, on a Windows/MacOs Intel computer. It is fixable (on your client only) by disabling the 'Out-of-process 2D canvas rasterization' flag on chrome://flags. Still waiting Google to fix this issue as it is a breaking issue.
Edit : tested on Chrome Beta (v106.0.5249.30) and the issue is still present
We experience the same problem (only with the Apple M1 processor, Apple M2 not tested). We developed an app using the canvas element. It worked fine with Apple M1 and Chrome (till v104). When Chrome v105 was launched the problem started and the canvas element didn't draw anything anymore. The problem only occurs when the flag accelerated 2d canvas is enabled. When this flag is disabled the canvas works fine again. This is a breaking issue and should be fixed by Google. Everything works fine in the latest version of Safari and Firefox with acceleration enabled.
The problem is fixed with Google Chrome v107. Topic can close.
I need to properly display an image depending on it exif image orientation tag.
I adjusted the rotation and flipping of the image for each case in the 8 possible image orientation options (described here)
I tested on the images in here
In Chrome (version 81.0) on Ubuntu 18.04, all image options display properly.
On MacOS and iOS I get different behaviors. Sometimes the images are not displayed properly
I read here that the behavior may change depending on the version of the webkit browser engine.
I want to adjust the code to each use case:
browser (e.g. Chrome, Firefox, Safari)
engine version (e.g. webkit version < 13.4, webkit version >= 13.4, etc...)
I read here and here that detecting the user agent is usually a bad idea, and that it is better to detect the existence of the feature
In my case, the feature exists in the different versions but the behavior of the agent is different between versions? (I think)
What would be the best way to detect the handling of image orientation (handling of exif imageOrientation tag)
Thanks,
Avner
That is cased because the default value of image-orientation has been changed in the recent versions of browsers.
From Chrome 81, the default value is from-image. https://chromestatus.com/feature/6313474512650240
In iOS, I observed that the value is from-image from iOS 13.4.
And I use the following code to detect the default value.
const getImageOrientation = (): string => {
const img = document.createElement('img');
img.style.display = 'none';
document.body.appendChild(img);
const imageOrientation = window.getComputedStyle(img).imageOrientation;
document.body.removeChild(img);
return imageOrientation;
};
if (getImageOrientation() !== 'from-image') {
// rotate image
}
I'm creating an HTML5 ad in Adobe Animate CC, which in itself is fine.
I'm trying to put in place browser fallbacks. When I test the ad, it displays fine except for in Internet Explorer <= 10.
What's odd is that, per this whitepaper by Cory Hudson, Ad Expert™, IE8 is the last browser in that progression that didn't support <canvas> and I do believe that.
Looking at IE9 and IE10 specifically, I find that the canvas element does show up, with the background color that I specified in Adobe Animate CC. There's just no elements or animations of any kind showing up in it.
CreateJS is advertised as supporting IE9+, but is there something specific that could be causing it to fail on IE9/10? I recognize that I'm dealing with Animate CC's generated JS code that uses CreateJS, but still any pointers would be helpful.
Man, I got the same problem!
I noticed that before last Animate's update, HTML5 works fine on IE <= 10, so I compared the files and get a hugh diference on the .HTML files.
One thing that was add on last update is "support HiDPI and Retina displays", so Adobe change the function "handleComplete" (in HTML file) and put some new lines on it.
One var of this function (pRatio) get a window attribute (window.devicePixelRatio), and on IE <= 10 this return undefined. There is our problem!
To HTML5 work, put this line before the line that set canvas.width, like this:
if(pRatio == undefined) pRatio = 1; //work on IE <= 10
canvas.width = w*pRatio*sRatio;
I think this will be fixed soon, but until that day, that's a solution.
Bye
In my application, I created Canvas and started to draw lines, rectangles and drawing with pencil. Everything works good on Firefox and Chrome(with latest versions). The Problem with IE only. While I draw on canvas with pencil, it was not draw at mouse pointing spot (drawn little bit top of the cursor point). I used IE version 10 only. Need to add any code for browser compatibility issue on IE 10??
Note: It was working on IE 9 but, If I changed browser version to IE 10 Compatibility View, It was showing This Browser doesn't support Html 5. Try with higher version
Thanks in Advance...
IE-10 compatability view makes IE-10 compatable with earlier version of IE. Canvas does not work with versions before IE-9. Using explorercanvas at http://code.google.com/p/explorercanvas/downloads/list allows canvas to be used with earlier versions.
Does your script work in IE-10 with compatability not switched on? It should do.
Is there a good library for converting SVG to HTML canvas that supports the font element? I have already tried canvg, but it does not support Font.
Browsers that support HTML5 Canvas also support SVG pretty well themselves. As such, you could do this:
var img = new Image;
img.onload = function(){ myCanvasContext.drawImage(img,0,0); };
img.src = "foo.svg";
The only downside to this technique is that if the SVG is outside of your domain the canvas will become tainted; you will not be able to use getImageData() to read the resulting SVG, if that is your goal.
I've put an example of this technique on my server: http://phrogz.net/tmp/canvas_from_svg.html
I've tested this and verified that it works (and looks the same) on IE9, Chrome v11b, Safari v5, and Firefox v4.
[Edit] Note that:
Chrome and Firefox currently 'punt' on security and disallow you from reading the canvas (e.g. getImageData() or toDataURL()) after you draw any SVG to the canvas (regardless of the domain) these have been fixed
Firefox currently has a bug where it refuses to draw SVG to the canvas unless the SVG has height and width attributes specified.
In case you have the svg embedded into HTML or as a raw source you can use a data URL to convert the svg to a HTML image element which you then can draw on the canvas:
var img = new Image();
// here attach an onload handler that draws the image on the canvas
// svgSource is the raw svg xml
img.src = "data:image/svg+xml," + encodeURIComponent(svgSource);
I just tried a simple img tag, Phrogs' method and canvg. My SVG has an embedded PNG. That only worked in canvg. The others showed the image without the embedded PNG. That was on Android Jellybean with either the standard browser or Chrome.