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;}