CODEWITHSUNDEEP
csshtmlhtml5-canvas
quasar66
quasar66

Reputation: 583

How to place two canvases adjacent to each other and on top of a third one

Need advice on HTML 5. Am relatively very new to this subject.

I wish to draw an image across the top half of the screen with two objects, logo, and a name placed over this image at fixed locations. I have tried to place the three objects into three different canvases within same div, but no luck, then placed the three objects in three different <div> values but no luck again.

For explanation purposes, I dropped the main background image, and tried experimenting with keeping just the two canvases one next to another, but unfortunately, no success. That code is as below :

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="mls.css"></link>
<title>HTML5 more difficult than 64 bit assembly</title>
<img id="logo_image"></img>
</head>

<body>
<div>
<div id="header_logo"><canvas id="header_logo_canvas"></canvas></div>
<div id="header_name"><canvas id="header_name_canvas"></canvas></div>
<div style="clear:both";></div>
</div>
<script type="text/javascript">
  var logo_canvas = document.getElementById("header_logo_canvas");
  var logo_context = logo_canvas.getContext("2d");
  var logo_img = document.getElementById("logo_image");
  logo_img.src="logo v2.jpg";
  logo_context.drawImage(logo_img,logo_canvas.width/2,logo_canvas.height/2);

  var h_name_canvas = document.getElementById("header_name_canvas");
  var h_name_context = h_name_canvas.getContext("2d");
  h_name_context.font="20px Arial";
  h_name_context.fillStyle="#0000FF";
  h_name_context.textAlign="left";
  h_name_context.fillText("HTML5",0,h_name_canvas.height/2);
</script>
</body>
</html>

and the corresponding CSS sheet is as below :

#logo_image {
    height:128px;
    width:128px;
}
#header_logo_canvas {
    border:3px;
    border-color:black;
    background:transparent;
    height:200px;
    width:200px;
    z-index:1;
}
#header_name_canvas {
    border:1px;
    border-color:blue;
    background:transparent;
    height:200px;
    width:600px;
    z-index:0;
}
#header_logo {
    position:absolute;
    left:100px;
    top:100px;  
    float:left;
    width:200px;
    background:transparent;
}
#header_name {
    position:absolute;
    left:300px;
    top:100px;      
    width:600px;
    background:transparent;
}

Request help with some detailed explanation suitable for new comers to the subject. Also, please advise how do I introduce the third main underlay picture to these two canvases ?

Thanks

Upvotes: 0

Views: 5857

Answers (1)

markE
markE

Reputation: 105045

Create a div container with position:relative and put your 3 canvases inside with position:absolute and use left to move the canvases as desired.

var canvasB=document.getElementById("canvasBottom");
var ctxB=canvasB.getContext("2d");
var canvasL=document.getElementById("canvasLeft");
var ctxL=canvasL.getContext("2d");
var canvasR=document.getElementById("canvasRight");
var ctxR=canvasR.getContext("2d");

drawLine(ctxB,'red');
drawLine(ctxL,'green');
drawLine(ctxR,'blue');

function drawLine(ctx,color){
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(ctx.canvas.width,ctx.canvas.height);
    ctx.strokeStyle=color;
    ctx.stroke();
}
#container{position:relative;border:1px solid gold;width:800px;height:400px;}
.part{position:absolute;}
#canvasBottom{left:0;border:2px solid red;}
#canvasLeft{left:0;border:1px solid green;}
#canvasRight{left:300px;border:1px solid blue;};   
<h4>Red==bottom canvas, Green==Left canvas, Blue==Right canvas</h4>
<canvas id="canvasBottom" class='part' width=700 height=350></canvas>
<canvas id="canvasLeft" class='part' width=300 height=300></canvas>
<canvas id="canvasRight" class='part' width=300 height=300></canvas>

Upvotes: 2

Related Questions