I am using globalCompositeOperation = 'copy' then a drawImage so that my new image replaces what is underneath.
This works fine in the latest Safari and Chrome browsers on Mac and Windows and also on the iPad.
It doesn't work in IE 9 and while it works in Firefox 3.6, it doesn't work in Firefox 4.0.
What seems to happen when it isn't working is the whole canvas gets erased, not just the area in the rect I pass to drawImage.
I think this is a bug in IE 9 and firefox 4.0 but should I not expect it to work?
These are the images of what Mozilla is assuming the Canvas is supposed to work:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#globalCompositeOperation
The problem is that the spec is written rather vaguely here. For example, for the copy composite type, it reads:
Display the source image instead of the destination image.
Which could be taken to be a synonym of source-over, or it could be taken to mean "clear the entire canvas and then copy the new drawing operation onto the canvas"
To see how the different browsers differ in their implementations, use the images provided by mozilla above with this live-firing (not images, canvases) of all the different composite shapes that has also provided by Mozilla:
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
Just looking quickly it seems that Chrome 11 disagrees with Firefox 4 on source-in, source-out, destination-in, destination-atop, darker, and copy.
It seems at a glance that the thing to note is that all of the differences are related to whether the non-pertinent pixels should be cleared or not. Mozilla seems to think so, Google does not.
When you use drawImage() with globalCompositeOperation="copy", it's unexpected that the canvas is cleared outside the destination rectangle. But this seems to be the consensus of how to interpret the standard. Even with fillRect() or when drawing a line, the whole canvas is cleared. You have to set a clipping region to prevent that.
For a discussion see: https://bugzilla.mozilla.org/show_bug.cgi?id=366283
Related
I use Pixi.js for my work project to draw simple shapes — circles and segments, and make some interaction between them. I work on Mac running El Capitan and test my prototype in Google Chrome. I use PIXI.autoDetectRenderer() method to set renderer and usually it is set to WebGL in latest browsers. I don't have any experience in WebGL, so might not know some important details.
When testing my application in Firefox I've noticed thin black border around shapes.
Turned out that antialias property set to true caused this effect:
renderer = new PIXI.autoDetectRenderer(width, height, {backgroundColor: 0xffffff, antialias: true})
I've done some investigation. On Pixi.js forums and on some other resources it's said that PIXI.Graphics() objects do not support anti-aliasing because of using the stencil buffer. On practice they do support anti-aliasing. Guess, something has changed since discussions took place.
I don't like the result I get with switched off anti-aliasing, here it is on images below.
I and my colleague had a talk about that, and we discovered that when any other graphic object lays behind, there is no black border around original one. So we added white rectangle behind other elements in case Firefox browser is used.
That solved problem of black border. Still I get far neater image in Google Chrome. There are lots of artifacts around segments and circles in Firefox.
They become more visible once elements get smaller.
In console I get following warning:
FXAA antialiasing being used instead of native antialiasing.
Is there a way to improve anti-aliasing quality in this case?
I've put together a fairly barebones example with Three.js - http://jsfiddle.net/4kehk2xv/7/ not very exciting but simple. If GPGPU works a square of randomly placed red coloured points should show, otherwise they'll all be positioned at the origin. The devices I'm testing on (Nexus 5 and iPad3) support the OES_texture_float extension and have MAX_VERTEX_TEXTURE_IMAGE_UNITS greater than 0. They don't support (as most mobile GPUs appear not to) the OES_texture_float_linear extension, but we should be able to get around that by using NEAREST filtering.
The error I'm coming across is below, Three.js also reports that OES_texture_float_linear isn't supported but this appears to be a check in the WebGLRenderer and not to do with the code I'm running.
[.WebGLRenderingContext]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawElements: framebuffer incomplete (check)
I'm working on a project where workers have to locate components on a plane. Planes are going to be scanned and put on a web app where, after that, user select where are placed.
My first idea was img map (where I work, computers still have IE, we are trying to change to Firefox or Chrome) but I'm not sure how make an area visible for user (some kind of dynamic overlay coloured area), so my second suggestion was to use a HTML 5 canvas.
Is better to work with an img map and find some solution to overlay points at least or work with canvas?
Note: where I work, they have to change to non-Windows OS, and use Firefox-based browser or Chromium, so the browser have not be seen as part of the problem.
Yes, I'd suggest to use a canvas to do that.
Quoting from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial:
<canvas> is an HTML element which can be used to draw graphics using
scripting (usually JavaScript). It can, for instance, be used to draw
graphs, make photo compositions or do simple (and not so simple)
animations. The image on the right shows some examples of <canvas>
implementations which we will see later in this tutorial.
<canvas> was first introduced by Apple for the Mac OS X Dashboard and
later implemented in Safari and Google Chrome. Gecko 1.8-based
browsers, such as Firefox 1.5, also support this element. The <canvas>
element is part of the WhatWG Web applications 1.0 specification also
known as HTML5.
This tutorial describes how to use the <canvas> element to draw 2D
graphics, starting with the basics. The examples provided should give
you some clear ideas what you can do with canvas and will provide code
snippets that may get you started in building your own content. Before
you start
Using the element isn't very difficult but you do need a
basic understanding of HTML and JavaScript. The <canvas> element isn't
supported in some older browsers, but is supported in recent versions
of all major browsers.The default size of the canvas is 300px * 150px
(width * height). But custom sizes can be defined using CSS height and
width property. In order to draw graphics on the canvas we use a
javascript context object, which creates graphics on the fly.
I'm writing a drawing application using HTML canvas. To smooth drawn lines, I'm filling a series of quadratic curves after each mousemove event:
ctx.beginPath()
ctx.moveTo(mx1-halfLastWidth*sin(angle), my1-halfLastWidth*cos(angle))
ctx.quadraticCurveTo(mx1-lastWidth*cos(angle), my1+lastWidth*sin(angle),
mx1+halfLastWidth*sin(angle), my1+halfLastWidth*cos(angle))
ctx.quadraticCurveTo(xl+halfMidWidth*sin(angle), yl+halfMidWidth*cos(angle),
mx2+halfCurrentWidth*sin(angle), my2+halfCurrentWidth*cos(angle))
ctx.quadraticCurveTo(mx2+currentWidth*cos(angle), my2-currentWidth*sin(angle),
mx2-halfCurrentWidth*sin(angle), my2-halfCurrentWidth*cos(angle))
ctx.quadraticCurveTo(xl-halfMidWidth*sin(angle), yl-halfMidWidth*cos(angle),
mx1-halfLastWidth*sin(angle), my1-halfLastWidth*cos(angle))
ctx.fill()
Full demo: http://jsfiddle.net/PfzM2/2/ (there's a lot of irrelevant code due to this being extracted from a much larger project)
The lines render very smoothly in Firefox, but seem "jagged" in places in Chrome:
The series of commands and arguments issued to the browsers was identical.
How can I get Chrome to render the lines like Firefox?
Similar questions have been asked all over the place with respect to font rendering. It's almost certainly possibly the same root problem: anti-aliasing differences that arise from the rendering engine. Chrome, as you know, uses Webkit; FF, Gecko. Gecko seems to like anti-aliasing more than Webkit.
Chalk it up to a browser issue (the way you would typically would for IE, I reckon).
EDIT: Seems the converse is known to be true, too. Nick Heer discusses this in his blog: "due to Gecko’s more precise (and blockier) anti-aliasing, most serif faces don’t look great." Could be a platform issue.
I am looking at using HTML5 Canvas element for my upcoming project. I want to know what all major browsers (including the versions!, cos i know that the latest builds do support canvas) support the Canvas tag. I don't give a damn about IE. So don't bother reporting IE. :) In this tutorial Drawing shapes - MDC, the quadraticCurveTo section says:
quadraticCurveTo(cp1x, cp1y, x, y) //
BROKEN in Firefox 1.5 (see work around
below)
Does that mean that Canvas is supported on Firefox 1.5 and above too?
caniuse.com lists browser support for many different features, including canvas.
Specifically, browser support for canvas is listed at caniuse.com/#search=canvas.
It's not only about "supporting Canvas", but about the bugs that each implementation has about this and missing methods that have been added since the initial release. So even if one version of Firefox does add the basic Canvas support, it might have some bugs that make it impossible to use it in your application.
In that case, you might need to check the current versions and then go back as far as you want to support to verify if they work as expected.