An afternoon with canvas

   Today I returned to my hostel after a 2 week long Diwali Break. Well, since it was Diwali it was obvious that I wouldnot be doing a single bit of coding and I am not complaining, but the last 3 days at home were free so I thought of getting in the mood slowly. So I picked up an old painting application that i had developed.
   The previous one was a simple jQuery based application and did not have a feature to save your work so all the Davincis and Picassos out there could not show others their creations. So I thought of making the same app but on HTML Canvas element as it was very easy to save what you did!
   This time again it was very easy to make the JQuery code that was used to paint. While it took me a long time setting up the positioning of the objects.Let me share some code needed to get the canvas up and running.

HTML: 
<canvas id="can" width="500" height="500">

CSS:
#can
{
   border:1px solid black;
}


JQuery/Javascript
var dodraw = false;

	var size=15;
	var canvas = document.getElementById("can");
	var ctx = canvas.getContext('2d');
	ctx.StrokeStyle="blue";
	ctx.lineCap="round";
	$("#can").mousedown(		function(e){dodraw=true;
	ctx.lineWidth=size;
	ctx.beginPath();
	ctx.moveTo(e.PageX,e.PageY);
	ctx.lineTo(e.PageX-1,e.PageY-1);
	ctx.stroke();}});
	$("#can").mousedown( dodraw=false;)

$("#can").mouseover(function(e){
   if(dodraw==true)
  {
      ctx.lineWidth=size;
      ctx.beginPath();
      ctx.moveTo(e.PageX,e.PageY);
      ctx.lineTo(e.PageX-1,e.PageY-1);
      ctx.stroke();
  }});

This code should be enough to get your canvas be able to draw stuff. You can further add features and modify the code as required.
I have currently added eraser,brush,save, new and size +/- buttons to the page.
The demo is available here:Open World

Tweet   

Another useful html tag!

WEll, this time I am talking about the < pre >  tag. It is used when you donot want to insert all the whitespaces individually.
Simply speaking, this tag is used when you want to have a preset text in your web-page.
Generally, the white spaces in your script are neglected by the browser. And they can be added using '&nbsp' ( meaning new blank space).Instead if you are using the 'pre' tag, it will display the text as it is written.
Despite the advantage, this tag is rarely seen in the web-pages.
This is the w3schools article on the tag.

PS: Being busy with my other work, am not able to blog regularly

Tweet

# in html!

All the C programmers tend to think of #include as soon as they see '#' symbol. But not all the people know that there is # used in html also!
Well we all have seen the wiikipedia page on one or the other thing,right? Now, there is a table of contents in every page. The elements of this table point to links in the same page. This is where a # symbol comes in handy. It is basically used to maintain an index within the web-page.
while giving the address give href="#link" instead of the entire address of the page.

and to give the target location give name="link" as a part of the 'a' attribute of the location


Here the difference from a normal href is that here we are starting the URL with # indicating that the target is in the same page. Also we have given an attribute 'name' with value=link. This is the address of the target.
(How else would the browser know where to point next?)

Hope you will find it helpfull.


Tweet