Programming a vector layer

Question

JavaScript

The following task arose: it is necessary to draw and layout an interactive element, which is a large layer with a vector image, divided into many clickable blocks of equal size (at least 5 thousand blocks for the entire layer).

That is, the meaning is approximately as follows: this layer is shown to the user, after which the user scales it until the blocks take a certain size so that the user can view them at a given scale (for example, 20 blocks on the screen).

So far, I'm considering JavaScript as a technology for implementing this interactive element. Flash is not allowed, by agreement in the problem. There are still thoughts about using HTML5 Canvas, but so far I do not know its capabilities, since I have never worked with it.

Who thinks about what technology to choose for implementation? Maybe there are tips from those who have already done something similar.

Answer 1

I don’t understand anything about this, but I HEARD that when using HTML5 Canvas, working with geometry as a vector will not work, because objects are immediately rasterized and all transformations are then done with the raster.

Answer 2

Why not SVG?
Canvas is a very low-level API, in order to draw vectors with it, you will have to write a rather big wrapper (although there may already be something).

Answer 3

If you use Canvas directly, through its native API, yes, there will be no vector there. What fell into the raster is gone.
But there are add-on frameworks that provide vector capabilities to a greater or lesser extent.
Offhand: Processing.js, MooTools Canvas Library, Gury, Paper.js, CanvasXpress, LibCanvas, jCanvaScript (the authors of the last two are present on Habré). All of them are easy to google. Look at the docs, maybe something will fit.
In addition, there are a bunch of libraries of a narrower profile, for example, drawing graphs, charts or displaying maps on the Google Maps dash.
If we talk about SVG, then they recall the Raphael library (there is an author on Habré). Though she's certainly not the only one.