drawImage() not working

A simplified version of the above answer. 

  //Create Canvas
  var canvas = document.createElement("canvas");
  canvas.width = 720 
  canvas.height = 500;

  //Get Context
  var ctx  = canvas.getContext("2d");
  ctx .fillStyle = "black";
  ctx .fillRect(0, 0, canvas.width, canvas.height);

  //Load Image
  var img = new Image();
  img.src = "https://images.pexels.com/photos/3722151/pexels-photo-3722151.jpeg";
  img.onload = function() {
  ctx .drawImage(
    img,
    0,
    0,
    canvas.width,
    canvas.height
  );
};

  //Add Canvas
  canvas.id = "fatLady";
  document.body.appendChild(canvas);

Try it on CodePen

https://codepen.io/hiteshsahu/pen/QWjrygb?editors=1111


You almost have it...

You just have to give the image time to load before drawing it.

You give an image time to load with this code:

var logoImg = new Image();
logoImg.onload = function() {

    // At this point, the image is fully loaded
    // So do your thing!

};
logoImg.src = "myPic.png";

Here is complete code and a Fiddle: http://jsfiddle.net/m1erickson/GKK39/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

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

        function showIntro() {

            var phrase = "Click or tap screen to start";

            var logoImg=new Image();
            logoImg.onload=function(){

                c.clearRect (0, 0, canvas.width, canvas.height);

                var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
                grd.addColorStop(0, "#9db7a0");
                grd.addColorStop(1, "#e6e6e6");
                c.fillStyle = grd;
                c.fillRect (0, 0, canvas.width, canvas.height);

                var originalWidth = logoImg.width;
                logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
                logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);

                var logo = {
                  img: logoImg,
                  x: (canvas.width/2) - (logoImg.width/2),
                  y: (canvas.height/2) - (logoImg.height/2)
                }
                c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

                c.font = "bold 16px sans-serif";
                var mt = c.measureText(phrase);
                var xcoord = (canvas.width / 2 ) - (mt.width / 2);
                c.fillStyle = '#656565'
                c.fillText (phrase, xcoord, 30);

            }
            logoImg.src="http://dl.dropbox.com/u/139992952/car.png";

        }

        showIntro();       

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Tags:

Javascript

Canvas

Drawimage

Preloading

Recent Posts