HTML 5

Question

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.

Answer 1

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>

Answer 2

@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" :)