INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Putting a canvas in a div

Putting a canvas in a div

(OP)
Hi,

I have a page with 4 divs - a header, left, right and footer. Left and right are held in another wrapper div. I am trying to draw a grid in my right div but am not quite sure how to this. My code so far is as follows:

CODE

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
    <head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
	<style>
*{margin:0px;padding:0px;}  
body {
    background: lightblue;
	top:0xp;left:0px;
}

canvas {
    background: #fff;
    margin: 20px;
}

div{position:absolute}   
div#header{top:0px;left:0px;right:0px;height:54px;} 
div#wrapper{top:54px;left:0px;right:0px;bottom:30px;border-top:1px dotted #A9D0F5;}  
div#right{top:0px;bottom:0px;left:17%;width:83%;overflow-y:auto;} 
div#left{top:0px;bottom:0px;left:0px;width:17%;overflow:hidden;height:1500px;background-color:#E6E6E6;}
div#footer{bottom:-1px;left:0px;width:100%;overflow:hidden;height:30px;border-top:1px #A9D0F5 dotted;background-color:#E6E6E6;} 
</style>
	</head>
    <body>
	
	<div id="header">
	</div>
	
	<div id="wrapper">
	
	  <div id="left">
	  </div>
	  
	  <div id="right">
	  
	  <script>
//grid width and height
var bw = 6000;
var bh = 3000;
//padding around grid
var p = 10;
//size of canvas
var cw = bw + (p*2) + 1;
var ch = bh + (p*2) + 1;

var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
var context = canvas.get(0).getContext("2d");

function drawBoard(){
    for (var x = 0; x <= bw; x += 40) {
        context.moveTo(0.5 + x + p, p);
        context.lineTo(0.5 + x + p, bh + p);
    }


    for (var x = 0; x <= bh; x += 40) {
        context.moveTo(p, 0.5 + x + p);
        context.lineTo(bw + p, 0.5 + x + p);
    }

    context.strokeStyle = "#E6E6E6";
    context.stroke();
}

drawBoard();
</script>
	  
	  </div>
	
	</div>
	
	<div id="footer">
	</div>
	
    </body>
</html> 

Any help gratefully received!

Thanks

Ed

RE: Putting a canvas in a div

out of curiosity, what is the grid used for? I'm wondering if it would just be easier to use a repeated background image?

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close