HTML5 canvas

happynnc · Mar 9, 2013, 01:43 AM

Hello,

Could you please help me with my code

At the beginning: I insert an image into table and view in browser >> I found that there are a line under this iamage then I use allign="middle" and I work.

But when I draw a canvas, i cannot put allign = "middle" into the script to remove the line under image. Could you help me please?

<!doctype html>
<html>

<head>
<link rel="stylesheet" href="Text-CSS/main.css">

<script>
function init() {
setImageOne();
}

function setImageOne() { setImage('Images/Home_Icon.jpg'); }

function setImageTwo() { setImage('Images/Home_Icon_Over.jpg'); }

function setImage(src) {
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
if (context == null) return;
var img = new Image();
img.src = src;
context.drawImage(img, 0, 0, 35, 44);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #999;
}
</style>
</head>

<body onLoad="init()">
<div>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="BG_Top_BN">
<tr>
<th scope="col">
<canvas id="e" width="35" height="44" onMouseOver="setImageTwo()" onMouseOut="setImageOne()" align="center">
<p>No Canvas Support in Browser</p>
</canvas>
</th>
</tr>
</table>
</div>
</body>

</html>

Mar 9, 2013, 01:43 AM	#1
happynnc macrumors newbie Join Date: Mar 2013	HTML5 canvas Hello, Could you please help me with my code At the beginning: I insert an image into table and view in browser >> I found that there are a line under this iamage then I use allign="middle" and I work. But when I draw a canvas, i cannot put allign = "middle" into the script to remove the line under image. Could you help me please? <!doctype html> <html> <head> <link rel="stylesheet" href="Text-CSS/main.css"> <script> function init() { setImageOne(); } function setImageOne() { setImage('Images/Home_Icon.jpg'); } function setImageTwo() { setImage('Images/Home_Icon_Over.jpg'); } function setImage(src) { var canvas = document.getElementById("e"); var context = canvas.getContext("2d"); if (context == null) return; var img = new Image(); img.src = src; context.drawImage(img, 0, 0, 35, 44); } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> body { background-color: #999; } </style> </head> <body onLoad="init()"> <div> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="BG_Top_BN"> <tr> <th scope="col"> <canvas id="e" width="35" height="44" onMouseOver="setImageTwo()" onMouseOut="setImageOne()" align="center"> <p>No Canvas Support in Browser</p> </canvas> </th> </tr> </table> </div> </body> </html>
	0

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode


MacRumors Forums > Special Interests > Visual Media > Web Design and Development