Dynamic pattern in javascript

Question

I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.

What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.

I know of a roundabout way to do it with svg but where would I start for javascript/jquery?

Answer 1

I know of a way to do it with svg but where would I start for javascript/jquery?

Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:

• There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
• It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
• Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.