No puedo obtener una imagen en lienzo en html5, ¿qué hacer?

He comprobado este código de mis w3schools donde está funcionando bien.

Pero cuando ejecuto este código en mi navegador, no funciona.

La imagen no se muestra en el lienzo. Además, probé el mismo código en el navegador w3schools en otra parte, pero tampoco funciona en ese navegador.

<!DOCTYPE html>
<html>
    <body>
        <p>Image to use:</p>
        <img id="scream" src="flower.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
        <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">

        <script>
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            var img=document.getElementById("scream");
            ctx.drawImage(img,10,10);
        </script>
    </body>
</html>

Respuestas a la pregunta(3)

Su respuesta a la pregunta