For people who, like me, don’t have much experience in either html or JavaScript programming, I was giving a play at the HTML5 canvas functionality that allows to draw 2D graphics on your html page.
Out of that, I created the code sample below that will hopefully be useful if you intent to work with those technologies.
I’m proud to introduce to you the first version of JS*CAD! A state-of-the-art HTML5/JavaScript-powered cutting edge CAD utility: It includes advanced functionalities such as drawing lines, circles, and other features too numerous to enumerate… So a serious threat to AutoCAD WS …? That’s for you to find out…
Welcome to JS*CAD 1.0.0 (Freeware edition)
New Drawing
Line
Circle
Color:
<html>
<head>
<script type="text/javascript">
//////////////////////////////////////////////////////
// Some static variables
//
//////////////////////////////////////////////////////
var center;
var currentHandler;
//////////////////////////////////////////////////////
// Initialize the canvas
//
//////////////////////////////////////////////////////
function initializeCanvas() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(0, 0, 500, 800);
ctx.stroke();
ctx.lineWidth = 2;
canvas.removeEventListener(
'click', currentHandler);
canvas.addEventListener(
'contextmenu', onContextMenu, false);
}
//////////////////////////////////////////////////////
// Returns coordinates in element coord system
//
//////////////////////////////////////////////////////
function getRelativeCoords(element, e) {
var offsetX = 0, offsetY = 0
if (element.offsetParent) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
return {
x: e.pageX - offsetX,
y: e.pageY - offsetY };
}
//////////////////////////////////////////////////////
// Draws a point
//
//////////////////////////////////////////////////////
function drawPoint(canvas, x, y) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(x, y, 1, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.closePath();
}
//////////////////////////////////////////////////////
// Adds new e listener and removes previous one
//
//////////////////////////////////////////////////////
function addNewListener(element, e, handler) {
element.removeEventListener(e, currentHandler);
element.addEventListener(e, handler, false);
currentHandler = handler;
}
//////////////////////////////////////////////////////
// Init functions for drawing
//
//////////////////////////////////////////////////////
function initDrawLine() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
addNewListener(canvas, 'click', drawLineBegin);
}
function initDrawCircle() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
addNewListener(canvas, 'click', drawCircleBegin);
}
//////////////////////////////////////////////////////
// Drawing functions
//
//////////////////////////////////////////////////////
function drawLineBegin(e) {
var canvas = document.getElementById('canvas');
var pos = getRelativeCoords(canvas, e);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
drawPoint(canvas, pos.x, pos.y);
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
addNewListener(canvas, 'click', drawLine);
}
function drawLine(e) {
var canvas = document.getElementById('canvas');
var pos = getRelativeCoords(canvas, e);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
}
function drawCircleBegin(e) {
var canvas = document.getElementById('canvas');
var pos = getRelativeCoords(canvas, e);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
drawPoint(canvas, pos.x, pos.y);
center = pos;
addNewListener(canvas, 'click', drawCircle);
}
function drawCircle(e) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var pos = getRelativeCoords(canvas, e);
var radius =
Math.sqrt(
(pos.x - center.x) * (pos.x - center.x) +
(pos.y - center.y) * (pos.y - center.y));
ctx.beginPath();
ctx.arc(center.x,
center.y,
radius, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.closePath();
addNewListener(canvas, 'click', drawCircleBegin);
}
//////////////////////////////////////////////////////
// Event Handlers
//
//////////////////////////////////////////////////////
function onLoad() {
initializeCanvas();
var colorInput =
document.getElementById('colorInput');
colorInput.value = "FFFFFF";
onColorChanged();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var color = document.getElementById('color');
ctx.strokeStyle = "#FFFFFF";
}
function onContextMenu(e) {
var canvas = document.getElementById('canvas');
var pos = getRelativeCoords(canvas, e);
e.preventDefault();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
}
function onColorChanged() {
var colorInput =
document.getElementById('colorInput');
var color = document.getElementById('color');
var value = colorInput.value;
var valid = "abcdefABCDEF0123456789";
var temp;
for (var i = 0; i < value.length; i++) {
temp = "" + value.substring(i, i + 1);
if (valid.indexOf(temp) == "-1") {
alert(
"Invalid color, please enter hexadecimal digits");
colorInput.focus();
colorInput.select();
return;
}
}
color.style.backgroundColor = '#' + value;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = color.style.backgroundColor;
canvas.removeEventListener(
'click',
currentHandler);
}
</script>
<style type="text/css">
td,
body {
font-family: sans-serif; font-size: 10pt;
}
body {
background-repeat:repeat-y;
background-color: #686868;
padding:0;
margin:5px 5px 5px 5px;
color:#FFF;
}
textarea {
font-family: Consolas; font-size: 8pt;
}
.status_text {
background-color: #000; color:#0F0
}
</style>
</head>
<body onload="onLoad()">
<p id='status_text' class='status_text'/>
<h3>Welcome to JS*CAD 1.0.0</h3>
<hr /> <!-------------------------------------->
<input
type='button'
onclick='initializeCanvas()'
value='New Drawing' />
<input
type='button'
onclick='initDrawLine()'
value='Line' />
<input
type='button'
onclick='initDrawCircle()'
value='Circle' />
Color:
<input
id="colorInput"
type='text'
style="width: 55px"
onchange="onColorChanged()"/>
<input
id="color"
type='text'
style="width: 55px"
readonly/>
<hr /> <!-------------------------------------->
<canvas id="canvas" width="500" height="400">
HTML5 Canvas Not Supported...
</canvas>
</body>
</html>
Subscribe
very nice!
Posted by: Farren | 12/26/2012 at 07:54 AM
Thanks!
Posted by: Philippe | 01/08/2013 at 06:50 AM