Here is a code snippet that showcases a picture within a Canvas:
<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>canpic</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"><META HTTP-EQUIV="Expires" CONTENT="-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
canvas { border: 42px solid green; }
</style>
</head><body>
CANVAS PICTURE TEST
<br>
<canvas id="pinaka" width="600" height="370">
No HTML5 in this browser!
</canvas>
<br>
<p id="message"></p>
<script>
var can; // Canvas
var ctx; // Canvas context
var backimage=new Image();
function test1() {
can=document.getElementById("pinaka");
ctx=can.getContext('2d');
backimage.src="images/p1.jpg";
alert('drawing');
ctx.drawImage(backimage,0,0);
}
$(document).ready(function() { test1(); })
</script>
</body></html>
The functionality works seamlessly on various browsers except for one issue:
Upon initial loading of the page in Safari 4, the image is rendered correctly within the canvas. However, upon performing a page reload (using Apple-R key), only the canvas border is displayed, leaving the interior of the canvas empty. No error messages are shown in the console, and the alert box confirming the execution of the test1() function does appear.
Could this be a Safari 4 bug that needs to be acknowledged, or is there a flaw in the code implementation? The code operates without any issues on other browsers such as Camino and SeaMonkey.