Does anyone know how to position a <canvas> element?
I want to put all the circles against the left:
I can't find anything that states how to place the element in a specific position, and it seems plain wrong to use <div>.
If you are interested, here is the code. Took me all damn day to get this one to work. The information is quite sparse and scattered to boot.
Anyways, I am collecting a bunch of resources right now. I'll begin a log in about one week with all the great stuff (read: links that are beyond my head) I found.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="web.css" />
</head>
<body>
<canvas id="thisCanvas" width="200" height="200">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("thisCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Music", 100, 110);
</script>
<canvas id="secondCanvas" width="200" height="200">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("secondCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Writing", 100, 110);
</script>
<canvas id="thirdCanvas" width="200" height="200">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("thirdCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Web", 100, 110);
</script>
</body>
</html>
I don't think that the doctype accepts styles in the head, so here is the stylesheet:
I know there are like 15 ways to write image links, but this is the ONLY way to write it so that it works. Standards FTL?
Code:
body
{
background-image:url('http://i218.photobucket.com/albums/cc208/davidtoomey/smallblot.jpg');
}