I am in a situation right now where I need to have some complex code working with Kinetic.js and a canvas element to work on IE8.
Officially, Kinetic.js has no plans of supporting IE8.
I tried using webshims lib but Kinetic.js fails on the following code:
Kinetic.Canvas = function(width, height) {
this.element = document.createElement('canvas');
this.context = this.element.getContext('2d'); //<-- Error here
// set dimensions
this.element.width = width;
this.element.height = height;
};
The error is "Object doesn't support property or method 'getContext'". It makes sense to me, since I would not expect the element canvas created by an IE8 document to implement the methods for a canvas element, but if the <canvas> element was already created, webshims would have played and you could use the methods. However, forcing Kinetic.js to use one single canvas element will break some of its functionality (since it creates canvas objects on the fly).
Which are my options in order to achieve this?
The simple answer is "no."
As one commentor mentioned, Google Chrome Frame is an OK substitute, which entails essentially installing Chrome's rendering engine as an IE plugin.
There's the excanvas project, which might sound good at first. It was an attempt to implement canvas in VML (SVG) so that IE 6-8 could use canvas.
Excanvas is awful. Especially with any animation, and it cannot do some canvas image manipulation stuff. And it hasn't been updated in almost 4 years. I highly suggest against using it, but it's there for your consideration.
Related
In a project where I am using a canvas, I need to get the canvas' transformation matrix.
On Chrome and Safari, this is possible using ctx.getTransform() (ctx being the canvas context object).
However, on Edge, getTransform() does not work. Does Edge have another ctx method/property that I need to call? Or there isn't any?
I know this question was asked before, but this was years before, and what I want is an update on that.
So my question is: Is there now, in 2019, a built-in method/property that returns us a canvas' transformation matrix on Edge?
Didn't check this, but I think .getTransform() is by HTML5 spec on getTransform()
and if a browser will implement it, it needs to have this specific signature.
So if you don't see it available, it most likely not implemented in the browser version you are testing.
Though, HTML5Test states that Edge support 2D Canvas fully.
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 have a couple of UI elements such as buttons in my web application. I was going to use CSS3's transitions to animate the transition from one background-image to another. I figured out that it's not possible with the current transitions draft at least. So, I was wondering if it would make sense to use Canvas as the button. I'm sure it can handle events, so, I see no problems here. Are there any?
Other than the fact that it's not supported in IE, no.
canvas is not supported in Internet Explorer. Also, canvas animations render very slowly on PCs with little CPU power.
Unless you are writing something that is for a specific target audience (say internal users with Firefox and dual-core cpu) I think you should avoid using canvas for now...
I came to conclusion: using Canvas for UI elements is not a good idea.
For example, if you create a select-box using Canvas, how is the list going to appear in the top of other HTML elements?
Use raphael.js (MIT license) - it give you canvas-like API using SVG (and VML for IE) and works in all amjor browsers including IE6. And its fast (not too slow even in IE)
Well not just IE, any browser that doesn't currently support it
I want to start using the processing.js framework. It's used for making images with the canvas element. However I'm reluctant to use it due to the fact that it's not widely supported.
So what's the best way for me to give the user an alternative image if they do not support the canvas element?
I'd need something like...
if(!canvas){
element.style.backgroundColor = 'red';
}
Is there a standardised way of doing this yet? If not what's the best thing I could do?
Any content between the <canvas></canvas> tags will be displayed if the canvas element is not supported. So you can try:
<canvas><img src="alt-image-for-old-browsers.png" /></canvas>
The logical thing that comes to mind is to place the JavaScript you want to run between the <canvas></canvas> tags:
<canvas>
<script>
document.getElementById('element').style.backgroundColor = 'red';
</script>
</canvas>
But alas this doesn't work. Even browsers that support the Canvas API will execute the script.
So perhaps the best thing you can do to programatically check that the browser supports the canvas API is to check the getContext method available on all <canvas></canvas> elements:
function supportsCanvasAPI() {
var canvas = document.createElement('canvas');
if (window.G_vmlCanvasManager) { // IE ExplorerCanvas lib included?
G_vmlCanvasManager.initElement(canvas);
}
return 'getContext' in canvas
}
That creates a dummy canvas (so as to not worry about grabbing a reference to one in the DOM already) and checks if the getContext property exists on the element. It also checks to see if ExplorerCanvas has been included for IE. It won't tell you exactly what features of the API are supported (beyond the standard set of shapes, paths, etc).
An article on feature-detecting HTML5 features (like canvas) can be found here.
if (typeof HTMLCanvasElement === 'undefined') {
// redirect to another page, or whatever you want
}
Yes, actually the useful property of HTML is that it ignores unknown tags. So the following:
<canvas> This text is shown to IE users </canvas>
Will show the fallback text in IE.
You may also consider using one of the JavaScript libraries that essentially create a working canvas tag in IE. Here's one: http://code.google.com/p/explorercanvas/
You could look at the Modernizr library to check for support for the various features you're interested in.
Canvas works on Opera, Chrome, Safari, Firefox, IE6-8 (with excanvas.js, as #philfreo mentioned).
Processing.js, in particular, does work on IE, as is stated on the Processing.js homepage:
Processing.js runs in FireFox, Safari,
Opera, Chrome and will also work with
Internet Explorer, using Explorer
Canvas.
There are a few tricks with IE: You need to pay special attention when you create a Canvas dynamically, you can't attach events to it (directly--you can attach to a container div), you can't get pixel info from the canvas, and radial gradients aren't supported. Oh, and it's a lot slower on IE, of course.
I don't think any of those caveats will apply to you when you're working in processing.js, except of course for the slowness of excanvas.js emulating the canvas.
This question is for a web application.
And maybe it's a stupid question but I was wondering if there is a way to
generate a polygon with 4 points, so that the user can himself drag
each point to create it's own (As an example, let's say that we want to remove a window from an image that it is not at a normal angle) .Is it possible?. I can't seem to
find anything after a few hours of search.
Look into the SVG and Canvas APIs. These will allow you to do vector drawings that can be updated via Javascript. For your stated purpose, updating the DOM of SVG documents might be easier. Canvas is more like a 2D bitmap, so you'd need to work out a lot of the drawing code yourself.
SVG Specs: http://www.w3.org/Graphics/SVG/
Canvas Specs: http://www.whatwg.org/specs/web-apps/current-work/
Note that SVG only works in IE with a plugin. Canvas works in IE only with Google exCanvas support.
Sounds like a job for the <canvas> tag or a Flash interface.