I have always wanted to play with Canvas – the HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. And I finally got a project!

After completing a website, the client came back with a beautiful mockup for a new page they wanted. It all seemed just fine until I saw the diagonal dashed lines that were connecting two images together. And of course this will need to be dynamic, so just tossing an image in that section will not be responsive.

Here’s a snippet from the mockup:

I asked around our teams of developers, but nobody had worked with Canvas before. Time to hit the books (websites) and figure this out!

This turned out to be a surprisingly easy project – since we’re not drawing fractals here and only a dashed line. Different functions control where to begin, where to end, and to stylize the stroke. And look how trendy I am writing with Const instead of Var.

Tools: HTML5, JavaScript.

Screenshot snippet of the final web page down below: