Как упоминалось @DBS, это была скорость. Вы не ждали загрузки изображения, прежде чем работать с ним.
Исправление состоит в том, чтобы прикрепить слушателя к событию load
изображения, используя либо image.addEventListener('load', () => {
, либо устаревший стиль image.onload = () => {
, который я использовал ниже.
Причина, по которой это работает в примере TryIt, заключается в том, что изображение кэшируется браузером со второй загрузки и далее, поэтому оно доступно сразу, и вам не нужно ждать его загрузки.
Я подозреваю, что когда вы запускаете его локально, если у вас открыт Devtools, кеш отключается из-за параметра в настройках Devtools, который называется «Отключить кеш (при открытом DevTools)». Поэтому он никогда не будет извлечен из кэша и, следовательно, никогда не будет работать.
Следующий код работает:
<html>
<head>
<meta charset=utf-8 />
<title>Draw a circle</title>
</head>
<body onload="draw();">
<canvas id="circle"></canvas>
</body>
<script>
var canvas = document.getElementById('circle'),
context = canvas.getContext('2d');
function draw() {
base_image = new Image();
base_image.src = 'http://sst-system.com/old/Planos/C21E34.JPG';
var canvas = document.getElementById('circle');
if (canvas.getContext) {
base_image = new Image();
base_image.src = 'http://sst-system.com/old/Planos/C21E34.JPG';
// The key change: put the rest of the code inside the onload callback
// to wait for the image to load before using it.
base_image.onload = function() {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.canvas.width = base_image.width;
ctx.canvas.height = base_image.height;
var X = 500;
var Y = 229;
var R = 6.4;
ctx.font = "15px Arial bold";
ctx.beginPath();
ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
ctx.lineWidth = 12;
ctx.strokeStyle = '#FF0000';
ctx.drawImage(base_image, 0, 0)
ctx.stroke();
ctx.fillText("TT", X - 9, Y + 5);
};
}
}
</script>
</html>