CODEWITHSUNDEEP
htmlcanvas
newbie
newbie

Reputation: 41

HTML 5 <Canvas>

Here's my code. Need help with drawing an image of a cloud in between the mountain landscape using html 5 canvas element and javascript code.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<canvas id="myCanvas" style="border:2px solid black;"></canvas>
</head>
<body>
<script>
var c= document.getElementById("myCanvas");
var d=c.getContext("2d");

d.beginPath();
d.strokeStyle="red";
d.moveTo(0,50);<!-- width is 0 and height is 50-->
d.lineTo(100,0);
d.moveTo(100,0);<!-- width is 0 and height is 50-->
d.lineTo(150,50);
d.moveTo(150,50);
d.lineTo(200,0);
d.moveTo(200,0);
d.lineTo(300,50);
d.lineTo(0,50);
d.stroke();
d.beginPath();
d.arc(150,15,10,0,2*Math.PI);
d.stroke();
d.beginPath();
d.strokeStyle="black";
d.moveTo(100,100);
d.lineTo(200,100);
d.lineTo(150,60);
d.lineTo(100,100);
d.lineTo(100,150);
d.lineTo(200,150);
d.lineTo(200,100);
d.stroke();
d.moveTo(135,150);
d.lineTo(135,120);
d.lineTo(135,120);
d.lineTo(160,120);
d.lineTo(160,150);
d.stroke();
d.beginPath();
d.arc(20,20,10,.25*Math.PI,.75*Math.PI);
d.stroke();
</script>
</body>
</html>

Please add any suitable code below mine to include the image of a cloud

Upvotes: 0

Views: 453

Answers (2)

jared
jared

Reputation: 732

@markE Apologies, my message was unclear.

I 100% agree with you. I upvoted your answer because it is absolutely the correct and most flexible way to do this! I assumed OP would have loved your answer.

I was surprised to read, after your thorough explanation, that @newbie said "..it did not answer my original question which required creating clouds with arc...". I was just trying to answer him, but was trying to point out that using arc() would be inflexible and not recommended.

Sorry for the misinterpretation.

I should just rewrite my response to say: "Ditto what @markE said" :)

Upvotes: 0

markE
markE

Reputation: 105015

You can draw clouds using cubic Bezier curves.

You can also move and resize the clouds as needed using transforms. The translate command will move the starting [x,y] point of your drawing. The scale command will scale the drawing larger and smaller.

Another set of useful commands is save() and restore(). context.save()will save the context state before you change drawing colors or do transformes. context.restore() will restore the original context as it existed before the last context.save. Otherwise, you would need to manually undo all the transforms and reset the colors.

Here's example code and a Demo:

var canvas=document.getElementById("canvas");
var d=canvas.getContext("2d");

d.fillStyle='skyblue';
d.fillRect(0,0,canvas.width,canvas.height);

cloud(50,100,0.50);

function cloud(x,y,scale){
  d.save();
  d.translate(x,y);
  d.scale(scale,scale);
  d.beginPath();
  d.moveTo(0, 0);
  d.bezierCurveTo(-40,  20, -40,  70,  60,  70);
  d.bezierCurveTo(80,  100, 150, 100, 170,  70);
  d.bezierCurveTo(250,  70, 250,  40, 220,  20);
  d.bezierCurveTo(260, -40, 200, -50, 170, -30);         
  d.bezierCurveTo(150, -75,  80, -60,  80, -30);
  d.bezierCurveTo(30,  -75, -20, -60,   0,   0);
  d.strokeStyle='lightgray';
  d.fillStyle='white';
  d.fill();
  d.stroke();
  d.restore();
}
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>

Upvotes: 2

Related Questions