title: Html5 Canvas and base64 image
body: <p>I have a base64 image which looks like this:   </p>
  
  <pre><code>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCA...... 
  </code></pre>
  
  <p>is there a way i can draw this on a canvas using the above encoded image? Does anyone have an example of this.</p>
  
  <p><strong>Edited:</strong></p>
  
  <p>This is working for me and its drawing the image only when its an image and not <strong>base64</strong></p>
  
  <p>This works:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
          var pos = 0, ctx = null, ctx2 = null,saveCB, image = [], image2 = new Image();
  
          var canvas = document.createElement('canvas');
  
  
          var image2 = new Image();
  
          canvas.setAttribute('width', 320);
          canvas.setAttribute('height', 240);
          ctx = canvas.getContext('2d');
          image = ctx.getImageData(0, 0, 320, 240);
  
          var saveCB = function (data) {
              var col = data.split(';');
              var img = image;
              for (var i = 0; i &lt; 320; i++) {
                  var tmp = parseInt(col[i]);
                  img.data[pos + 0] = (tmp &gt;&gt; 16) &amp; 0xff;
                  img.data[pos + 1] = (tmp &gt;&gt; 8) &amp; 0xff;
                  img.data[pos + 2] = tmp &amp; 0xff;
                  img.data[pos + 3] = 0xff;
                  pos += 4;
              }
  
              if (pos &gt;= 4 * 320 * 240) {
                  ctx.putImageData(img, 0, 0);
                  foto = canvas.toDataURL("image/png");
                  $("#photo").val(foto);
                  alert($("#photo").val()); 
  
  
                  ctx2 = document.getElementById("canvas2").getContext("2d");
                  ctx2.clearRect(0, 0, 320, 240);
                  image2.src = 'http://blackberry12.com/uploads/allimg/110311/2-110311153Z90-L.jpg';
                  ctx2.drawImage(image2,0,0);           
  
                  pos = 0;
              }
          };
  &lt;/script&gt;
  </code></pre>
  
  <p>if i change image2.src to foto or $("#photo").val() i am not getting anything just a white canvas.</p>
  
  <p><strong>Edited</strong>
  From my investigation i am getting the same base64 code every time i take a pic and encode. It seems like the base64 code is really a white screen. Can anyone help here, cant see where i made the error.</p>