HTML5 Canvas: Batman Logo via Mathematics

— 1 minute, 27 seconds read —
Batman logo HTML5 Canvas experiment browser result thumbnail

In your browser, HTML5 Canvas API & Mathematics can draw the perfect Batman logo.

In the developer’s world, the HTML5 Canvas API has made quite an impact. To keep users entertained whilst having network issues via a built-in browser game, Google uses it to keep Chrome users entertained. Website developers use it to replace the functionality that Adobe Flash provides. Achieving the same functionality in question via the HTML5 Canvas can be done without needing to download a plugin. There is also an increase in the amount of Canvas dedicated projects on GitHub. As you can see, the HTML5 Canvas API is getting the much attention it needs. Today we are going to use it to draw the batman logo purely through mathematics.

Mathematics behind the Batman Logo

HTML5 Canvas: the Batman logo
An incredibly powerful software provided by Wolfram Alpha provides people with solutions to complicated queries. This is achieved through its vast store of knowledge. The perfect Batman logo in your browser can be drawn with the help of the HTML5 Canvas API. The maths behind it is a nice test of coordinate geometry. We’re not going to explain the maths in detail as that would take a long time. However, some of you may notice when looking at the demo that it uses the equation of an eclipse to create the Bat wings.

Here’s how the mathematics was integrated using the HTML5 Canvas API

The mathematics was rearranged to get it in the form of y=f(x) or x=g(y). This could then be used to plot multiple coordinates between certain inequalities. Lines were drawn between the coordinates resulting in the output of the famous Batman logo.
The final result can be seen below.

Batman Logo maths further reading

A great article regarding the Batman logo mathematics can be found on Math StackExchange.


Mudassir Ahmed