Drawing lines in Mozilla based browsers and the Internet Explorer

Introduction

In this article, I want to explain and deduce the line drawing algorithm by Bresenham. Afterwards, I will show an optimized version which can be used to draw lines in Gecko based browsers like Mozilla or Firefox and Microsoft's Internet Explorer. As you know, HTML itself is not able to describe lines. Therefore, there is no built-in features in the above-mentioned browsers for drawing lines. By implementing the Bresenham algorithm with JavaScript while applying some tricks, we will be able to draw lines in a good manner in respect to the browser's runtime and memory footprints.

The Bresenham algorithm

The Bresenham algorithm aims at drawing an approximation of the mathematically correct line, which can be described in the form of a linear mathematical function. The demand for this algorithm came to hand when the first raster display or digital plotters were developed. These devices were unable to draw a continuous line in a strict mathematical sense. Rather, they were designed to plot a single pixel with a certain height and width on a screen coordinate. The approximation is based on finding the best and closest path on this raster display from the starting point to the end point.

The ideal line

The mathematical formula for describing a line is the following linear equation: y = m*x + b. In other words, a mathematical line is defined by a slope (variable m) and a pitch from the x-axis (variable b). By choosing two different points, we can, therefore, exactly define a line. To determine the two missing pieces of information (the slope and the pitch), we have to solve the following two equations:

I) y1 = m*x1 + b
II) y2 = m*x2 + b

=> I)
b = y1 - m*x1
=> II)
y2 = m*x2 + y1 - m*x1
y2 = m*(x2 - x1) + y1
m = (y2 - y1) / (x2 - x1)      | x1 != x2

Read more: Codeproject

Posted via email from Jasper-net