HTML5 canvas.getContext("2d") in sharepoint 2010

Question

I'm writing Visual WebPart for Sharepoint 2010, and I need use HTML5 canvas.

        document.getElementById("testDiv").innerHTML = '<a href="http://c-blues.com">Right</a>';
        ctx = canvas.getContext("2d");
        cxt.fillStyle="#000000;
        cxt.fillRect(0,0,150,75);

But there is error:

Runtime error Microsoft JScript: Object does not support property or method "getContext"

When I try to use this code in ASP.NET web application< it's work fine. What's wrong?\

P.S: all code:

<!DOCTYPE HTML>
<style type="text/css">
.clocks {
    height: 500px;
    margin: 25px auto;
    position: relative;
    width: 500px;
}

var canvas;
var ctx;
var clockRadius = 250;
var clockImage;

// функции отрисовки :
function clear() { // очистка
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // основная функция drawScene
    clear(); // очистка канвы

    // получение текущего времени
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // сохранение
    ctx.save();

    // отрисовка часов (как бэк)
    ctx.drawImage(clockImage, 0, 0, 500, 500);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    // отрисовка чисел
    ctx.font = '36px Arial';
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }

    // часы
    ctx.save();
    var theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.5, 1);
    ctx.lineTo(clockRadius * 0.5, -1);
    ctx.fill();
    ctx.restore();

    // минуты
    ctx.save();
    var theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fill();
    ctx.restore();

    // секунды
    ctx.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.9, 1);
    ctx.lineTo(clockRadius * 0.9, -1);
    ctx.fillStyle = '#0f0';
    ctx.fill();
    ctx.restore();

    ctx.restore();
}

function init() {
    canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        document.getElementById("testDiv").innerHTML = '<a href="http://c-blues.com">Right</a>';
        ctx = canvas.getContext("2d");
       clockImage = new Image();
        //            setInterval(drawScene, 1000);
        cxt.fillStyle="Red";
        cxt.fillRect(0,0,150,75);
    }
    else {
        ctx = canvas.getContext("2d");
        cxt.fillStyle="Green";
        cxt.fillRect(0,0,150,75);
        document.getElementById("testDiv").innerHTML = '<a href="http://c-blues.com">Error</a>';
    }
}
// инициализация
window.onload = init;
</script>

<div class="clocks">
<canvas id="canvas" width="500" height="500">
</canvas>

Please provide all the relevant code - you dont show where canvas is declared. — Gerard Sexton, Jan 29 '13 at 09:57
You didn't post the initialization for the variable canvas. Maybe you have a mistake there, and the variable doesn't actually point to a canvas DOM node? — Philipp, Jan 29 '13 at 09:57
Which version of IE are you using? canvas is only supported for IE>8 — devnull69, Jan 29 '13 at 10:22

score 1 · Accepted Answer · edited May 23 '17 at 11:56

The browser you are using does not seem to support the <canvas> element. The error you posted just shows that the object (canvas) doesn't support the method getContext.

See this post which explains how to check whether your browser supports canvas. Actually the answer contains exactly the code you are trying to use to detect whether canvas is supported - seems in your case canvas is not supprted:

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

score 0 · Answer 2 · answered Jan 27 '15 at 05:54

0

ctx = canvas.getContext("2d");
cxt.fillStyle="#000000;

ctx and cxt =)

right

ctx.fillStyle="#000000;

answered Jan 27 '15 at 05:54

gevaraweb

912
7
19

HTML5 canvas.getContext("2d") in sharepoint 2010

2 Answers2