So in this tutorial, I will show you how to use a canvas element to create an icon that can serve as a link for a moving around. It creates the x,y verticies with 4 arrows pointing in every direction like normal move tools.
Final Example Looks Like This
Okay lets get started:
<a href="javascript:'';"><canvas id="moveCanv" width="20" height="20">get a better browser</canvas></a>
This will create a blank link with a canvas inside of it.
"get a better browser" will be shown Only to people who can't see canvas elements, and you can could put <div id="yousuck">something else</div> there too, because hopefully they can at least see divs.
Then You need to go into javascript and put your fingers into the canvas's puppet(metaphorically).
<script>
var moveCanv=document.getElementById('moveCanv');
var moveContext=moveCanv.getContext('2d');
so far we've just said hey this is what we're working with, creating the variables moveCanv and moveContext. You can see that one is defined off the other one, and later on you can do moveContext.canvas instead of moveCanv.
If you want you can skip defining moveCanv altogether and just do moveContext=document.getElementById('moveCanv').getContext('2d');
Here i chose to define moveCanv, because we'll be using it to set the width and I think it's a little faster to type and for the iterations to select to have it predefined(though I could be wrong about the iteration speed thing).
Whenever you're doing any graphics work, its usually on the context and not the canvas, the only time you really use canvas is for width and height, to get them , and to set them.
Setting the width and height will also clear the canvas to be blank, though it may not always be the fastest way to do so(like if you are clearing the canvas many times per second, you may need every inch of performance).
Here are 2 ways to clear the canvas
moveCanv.width=moveCanv.width;
moveContext.fillStyle="rgba(0,0,0,0)";
moveContext.fillRect(0,0,moveContext.canvas.width,moveCanv.height);//i used 1 width from 1 way and 1 height from the other way to show they are interchangable if you have the canvas defined
So Before you tell it where to draw, you have to say how big and what color
moveContext.lineWidth=1;
moveContext.strokeStyle="#000";
Pretty simple, now to draw lines, which will give you the understanding to draw bezier curves(they just use more points) and rectangles, anyway to draw lines you must use moveTo and lineTo, one to say where to start, and then it draws lines wherever you want. for instance:
moveContext.moveTo(0,0);
moveContext.lineTo(10,10);
would create one line across a 10 by 10 canvas so you'd know you were at least accessing the context successfully. this is a quick test to run to make sure you're on your way to really manipulating image data.
So the more lines you make thats alot of writing, so why not make it so that every time we want to move somewhere, thats 0, and making a line is 1.
You also need an x and a y, so we will have 3 variables we will be using over and over, either draw a line or not(1/0), x, and y.
var etching=[0,1,4, 1,0,5, 1,1,6, 0,0,5, 1,10,5, 1,9,6, 0,10,5, 1,9,4, 0,4,1, 1,5,0, 1,6,1, 0,5,0, 1,5,10, 1,4,9, 0,5,10, 1,6,9];
So looking at this, its 0 move to xy(1,4), then 1 line to xy(0,5),etc.
Lets loop it and let the program shoot it out like that.
var ei=etching.length;
for(var o=0;o<ei;o++){
if(etching.shift()==0){
moveContext.moveTo(etching.shift(),etching.shift());
} else {
moveContext.lineTo(etching.shift(),etching.shift());
}
}
moveContext.stroke();
</script>
var ei=etching.length;// how many numbers to look at?
for(var o=0;o<ei;o++){ // starting at 0, go up(++) to ei. o will be 0,1,2,3,4,... if you want to access it
if(etching.shift()==0){//shift takes the first number out of etching(removes it) and gives it to us
moveContext.moveTo(etching.shift(),etching.shift());//if it was 0 we chose to move
} else {//since the value has been removed from the array, you can't do an else if(etching.shift()) because you'd get the 2nd number we put in which is actually the x value.
moveContext.lineTo(etching.shift(),etching.shift());
}
}
moveContext.stroke();//when we're done, we say use all of the width, color and points we put in to make lines.
</script>
So the full code(copy paste) is here to make a move tool icon using only code and canvas.
<a href="javascript:'';"><canvas id="moveCanv" width="20" height="20">get a better browser</canvas></a>
<script>
var moveCanv=document.getElementById('moveCanv');
var moveContext=moveCanv.getContext('2d');
moveContext.lineWidth=1;
moveContext.strokeStyle="#000";
var etching=[0,1,4,1,0,5,1,1,6,0,0,5,1,10,5,1,9,6,0,10,5,1,9,4,0,4,1,1,5,0,1,6,1,0,5,0,1,5,10,1,4,9,0,5,10,1,6,9];//haha
var ei=etching.length;
var factor=2;//change this to whatever you want it to be times 10, so 2 is 20 by 20 and 2.34 or any .number works, doesn't have to be int
moveCanv.height=moveCanv.width=10*factor;
for(var o=0;o<ei;o++){
if(etching.shift()==0){
moveContext.moveTo(Math.floor(etching.shift()*factor),Math.floor(etching.shift()*factor));
} else {
moveContext.lineTo(Math.floor(etching.shift()*factor),Math.floor(etching.shift()*factor));
}
}
moveContext.stroke();
</script>
As you can see I added a factor, so you can make it bigger and smaller all by setting 1 number, and it will draw at that size times 10.
