StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML context.drawimage not working
text
Body
copied!<p>I am trying to display an image within a canvas with no luck. The context.filltext shows but the image does not. The image works if i display it directly but does not show when added to canvas. TaggedImage contains the text plus image.</p> <pre><code>function onCameraPicSuccess(imgData) { document.getElementById('tempImg').src = "data:image/jpeg;base64," + imgData; var lat = parseFloat(document.getElementById('lat').innerHTML); var long = parseFloat(document.getElementById('long').innerHTML); var accuracy = parseInt(document.getElementById('accuracy').innerHTML); drawCanvas(lat, long); var dataURL = document.getElementById("canvasPnl").toDataURL(); document.getElementById('taggedImage').src = dataURL; document.getElementById('tempImg').style.display = 'block'; document.getElementById('taggedImage').style.display = 'block'; var radius = accuracy / 2; var circle = L.circle([lat, long], radius, { color: 'yellow', fillColor: '#FF0', fillOpacity: 0.5 }).addTo(map).bindPopup("Captured picture <br />" + document.getElementById('taggedImage').outerHTML).openPopup(); } function drawCanvas(latitude, longitude) { var exif; var canvas = document.getElementById("canvasPnl"); var locationtxt = "Latitude: " + latitude + ", Longitude: " + longitude; var context = canvas.getContext('2d'); context.imageSmoothingEnabled = false; context.fillText(locationtxt, 10, 50); var image = new Image(); image.onload = function(){ context.drawImage(image, 10, 10, 200, 200); alert('image loaded'); }; image.src = document.getElementById('tempImg').src; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload