Created: 2014-05-18 20:48
Updated: 2017-02-06 09:11
License: mit


Html5 Canvas/JavaScript based semi-realistic eyeball

Eyeball rendered with yellow iris

Eyeball rendered with green iris

Architected from the ground up to be fully configurable. From iris colour and eyeball size to vein complexity and rotation limits.

There are over twenty user settings allowing ultra-realistic renderings to bizarre and frightening Halloween visions of horror.

Sensible defaults means nothing other than the div to render to is required.

Framework agnostic. Although jQuery is used throughout the examples is not required and just makes wiring up mouse actions easy.


Live demo with image cut-outs

Live demo with image cut-outs, eyeballs linked

Live demo twelve independent eyeballs

Live demo alter eyeball settings and see changes


Include the html5eyeball.js and create the eyeball object by calling the constructor with the id of the html element you want to hold the eyeball.

var eyeball = new Eyeball("eyeball"); 

Once you have the eyeball object you can set properties on it and call methods. = 0.6; 

to generate or re-generate the eyeball call init()


The CSS size of the element hosting the eyeball defines the diameter of the eyeball



Distance the iris is allowed to travel within the eyeball.


Number of random lines that are projected from the centre of the iris.


Initial iris colour. [1]


This is the colour that the iris lines fade to randomly, normally a highly transparent colour. [1]


Is the ambient iris colour where no eyeColour or irisOuterColour rendered pixels exist. Normally set to black. [1]


The central part of the background eyeball's colour, often white, takes up 75%. [1]


The next 10% of the eyeball background gradient. [1]


The last 15% of the eyeball background gradient, the edge. [1]


Colour of the veins. [1]


The width of the veins. Where "1.0" sets a line to have a 1px width, non-anti aliased. Any non whole number creates an nice smooth anti aliased result.


The number of times the vein algorithm will create a new branch. A value of "1" creates no branches only the initial single starting line.

WARNING! Setting high values will slow your computer down exponentially and as each branch gets shorter you will not see them anyway.


Set to "1.0" the pupil will be drawn with a diameter of 1/6th the diameter of the eyeball.


When setIris() is called the pupil will be drawn twice its current size and then at 30 frames per second it will shrink back to it's normal diameter. The scaling algorithm uses the non-linear circle scaling method.


Colour of the pupil, I suggest black. [1]


These two parameters define the location, size and appearance of the two highlights.

The setting is a JSON string defining

  • x horizontal location as a decimal of total width. e.g. 0.5 is half way.
  • y vertical location as a decimal of total height. e.g. 0.0 is the top.
  • width width as a decimal of total width. e.g. 0.5 is half the total size.
  • height height as a decimal of total height. e.g. 1.0 is the same as the full height.
  • colour1 inner colour [1]
  • colour2 outer or edge colour [1]
{"x":.35, "y":.35, "width":.16, "height":.1, "colour1" : {"red":200, "green":200, "blue":200, "alpha" : 0.4}, "colour2" : {"red":0, "green":0, "blue":0, "alpha" : 0.0}};


An array of colours [1] used as a random pool when the setIris() method is called.


If false does not set the CSS display:none on the canvas layers that make up the eyeball.


If false renders triangle markers on the eyeball for diagnostics.


If false uses a linear method of scaling the iris.


This is the string id of the element you want to contain the eyeball. It is set via the constructor and I can not think of a good reason why you would set it manually.



Call after the settings are correct, it will recreate all the required layers.

doDraw(mx, my)

With no parameters centres the eye. Often called with the mouse coordinates to set the eye to look at the mouse location.

$(window).mousemove(function (event) {
    eyeball.doDraw(event.pageX, event.pageY);

Example uses jQuery


When called with no parameters sets the iris to a random colour from the irisColours array. As this is truly random, there is a possibility that the colour chosen will the colour already in use. If animatePupil is true then the pupil is animated.

NOTE If animatePupil is false then the iris colour is updated but not redrawn, call doDraw().

History and related links



Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

{"red":0,   "green":255, "blue":255};
{"red":100, "green":100, "blue":100, "alpha":0.5}
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more