CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
Alexgomez88
Alexgomez88

Reputation: 23

Img map vs canvas

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.

Upvotes: 0

Views: 307

Answers (1)

Toothbrush
Toothbrush

Reputation: 2141

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.

Upvotes: 1

Related Questions