Как отобразить изображение, если браузер не поддерживает HTML 5 Canvas

Question

У меня есть контент HTML 5 с Javascript, который генерирует набор прямоугольников и текстов со ссылками. Этот код не работает на IE8, потому что он не поддерживает HTML 5. Я хочу, чтобы браузер отображал изображение вместо текста, если страница отображается в IE8 или любом другом браузере, который не поддерживает HTML5.

Я пробовал этот код, но он не дал ожидаемого результата.

function draw(){ 
    canvas = document.getElementById("myCanvas"); 
    // check if supported 
    if(canvas.getContext){ 

    ctx=canvas.getContext("2d"); 

    var ctz=canvas.getContext("2d"); 
    ctz.fillStyle="#FF0000"; 
    ctz.fillRect(0,0,150,75); 

    //..Rest of the code to add html5 content 

    }else{ 
    var img = document.createElement("img"); 
    img.src = 'http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg'; 
    img.width = 276; 
    img.height = 110; 
    img.alt = ''; 

    document.body.appendChild(img); 

    } 
} 
draw(); 

В чем может быть ошибка?

Answer 1

По определению canvas element, его содержания выступает в качестве резервного содержания: оно игнорируется браузерами, которые реализуют элемент, но это, естественно, будет обрабатываться и отображаться на старых браузерах, которые просто игнорируют <canvas ...> и </canvas> тегов. Пример:

<canvas id=myCanvas> 
<img src=http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg 
    alt="" width=276 height=110> 
</canvas>