canvas - How to draw a full coordinate system with Easeljs? -

i create complete coordinate system drawing on canvas.

it should similar this:

my question is, code create image easeljs? please ignore headline "koordinatensystem" , red cross in center.

i did once in flash used line tool, arrow tool, label tool, etc.

now porting html5 , trying create using code :)

well, not know if can called optimized code, enough produce this:

html:

<canvas id="canvas2d" width="750" height="600"></canvas> 

javascript:

var stage = new createjs.stage('canvas2d'); var coord_xaxis = new createjs.shape(); stage.addchild(coord_xaxis); var coord_yaxis = new createjs.shape(); stage.addchild(coord_yaxis); var coord_arrow_x = new createjs.shape(); stage.addchild(coord_arrow_x); var coord_arrow_y = new createjs.shape(); stage.addchild(coord_arrow_y); var coord_xaxis_lines = new createjs.shape(); stage.addchild(coord_xaxis_lines); var coord_yaxis_lines = new createjs.shape(); stage.addchild(coord_yaxis_lines);  var axis_center_x = $('#canvas2d').width()/2;; var axis_center_y = $('#canvas2d').height()/2; var xaxis_width = $('#canvas2d').width()-0.05*$('#canvas2d').width(); var yaxis_width = $('#canvas2d').height()-0.05*$('#canvas2d').height(); var axis_start_x = ($('#canvas2d').width()-xaxis_width)/2; var axis_start_y = ($('#canvas2d').height()-yaxis_width)/2;  var axis_strokewidth = 2; coord_xaxis.graphics.setstrokestyle(axis_strokewidth,'round').beginstroke('#000'); coord_xaxis.graphics.moveto(axis_start_x, axis_center_y).lineto(axis_start_x+xaxis_width, axis_center_y); coord_yaxis.graphics.setstrokestyle(axis_strokewidth,'round').beginstroke('#000'); coord_yaxis.graphics.moveto(axis_center_x, axis_start_y).lineto(axis_center_x, axis_start_y+yaxis_width);  // draw coordsys arrow x-axis var arrwidth = 5; var arrxtnd = 5; coord_arrow_x.graphics.beginfill('#000'); coord_arrow_x.graphics.setstrokestyle(axis_strokewidth,'round').beginstroke('#000'); coord_arrow_x.graphics.moveto(axis_center_x, axis_start_y-arrwidth/2).lineto(axis_center_x+arrwidth, axis_start_y+arrwidth+arrxtnd).lineto(axis_center_x-arrwidth, axis_start_y+arrwidth+arrxtnd).lineto(axis_center_x, axis_start_y-arrwidth/2); coord_arrow_x.graphics.endfill();  // draw coordsys arrow y-axis coord_arrow_y.graphics.beginfill('#000'); coord_arrow_y.graphics.beginstroke('#000'); coord_arrow_y.graphics.moveto(axis_start_x+xaxis_width+arrwidth/2, axis_center_y).lineto(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y+arrwidth).lineto(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y-arrwidth).lineto(axis_start_x+xaxis_width+arrwidth/2, axis_center_y); coord_arrow_y.graphics.endfill();  var label_x = new createjs.text('x', 'bold 16px arial', '#333'); var label_y = new createjs.text('y', 'bold 16px arial', '#333'); stage.addchild(label_x); stage.addchild(label_y); label_x.x = axis_start_x+xaxis_width-5; label_x.y = axis_center_y+10; label_y.x = axis_center_x-20; label_y.y = axis_start_y-5;  var stepdist = xaxis_width/14; var steplinew = 6; // 10 horizontal lines var xlines = 10; var labels_x = []; for(var i=0;i<=xlines;i++) {     // dont overdraw x-axis-line     if(i!=xlines/2) {         // long gray line         coord_yaxis_lines.graphics.setstrokestyle(1,'round').beginstroke('#ddd');         coord_yaxis_lines.graphics.moveto(axis_start_x, axis_center_y+(i-xlines/2)*stepdist).lineto(axis_start_x+xaxis_width, axis_center_y+(i-xlines/2)*stepdist);                  // little black marker         coord_yaxis_lines.graphics.setstrokestyle(1,'round').beginstroke('#000');         coord_yaxis_lines.graphics.moveto(axis_center_x-steplinew, axis_center_y+(i-xlines/2)*stepdist).lineto(axis_center_x+steplinew, axis_center_y+(i-xlines/2)*stepdist);         // labels         labels_x[i] = new createjs.text('x', '14px arial', '#333');         labels_x[i].x = axis_center_x-12;         labels_x[i].y = axis_center_y+(i-xlines/2)*stepdist-6; // move bit         stage.addchild(labels_x[i]);         labels_x[i].text = -(i-xlines/2);         labels_x[i].textalign = 'right';     } } // 12 orthogonal lines var ylines = 12; var labels_y = []; for(var i=0;i<=ylines;i++) {     // dont overdraw y-axis-line     if(i!=ylines/2) {         // long gray line         coord_xaxis_lines.graphics.setstrokestyle(1,'round').beginstroke('#ddd');         coord_xaxis_lines.graphics.moveto(axis_center_x+(i-ylines/2)*stepdist, axis_start_y).lineto(axis_center_x+(i-ylines/2)*stepdist, axis_start_y+yaxis_width);                  // little black marker         coord_xaxis_lines.graphics.setstrokestyle(1,'round').beginstroke('#000');         coord_xaxis_lines.graphics.moveto(axis_center_x+(i-ylines/2)*stepdist, axis_center_y-steplinew).lineto(axis_center_x+(i-ylines/2)*stepdist, axis_center_y+steplinew);                    // labels         labels_y[i] = new createjs.text('x', '14px arial', '#333');         labels_y[i].x = axis_center_x+(i-ylines/2)*stepdist; // move bit         labels_y[i].y = axis_center_y+12;         stage.addchild(labels_y[i]);         labels_y[i].text = (i-ylines/2);         labels_y[i].textalign = 'center';     } }  stage.update();