Cannot read property 'getContext' of null

2019-07-24 05:06发布

站内问答 / JavaScript
1683 6 5

I have a button which on click executes this function.This code is to draw a line on canvas element on which PDF file gets rendered on a webpage by using PDF.JS. But i get an error "Uncaught TypeError: Cannot read property 'getContext' of null". What should i do.

function abc()
{
alert("msg");
var c=document.getElementById("canvas1");
alert(c);
var ctx= c.getContext('2d');
alert(ctx);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
}

6条回答
ら.Afraid
2楼-- · 2019-07-24 05:27

Assuming your alerts report that you have valid references to your canvas and context:

Alert#1: HTMLCanvasElement and

Alert#2: CanvasRenderingContext2D (or your browsers version of these)

Then the code you have presented will work in html5 canvas (no errors).

Since you are working with pdf.js, your error might be in code you haven't shown us.

Make sure you are feeding pdf.js a valid context

This alert should be CanvasRenderingContext2D

// test if the context you're feeding pdf.js is valid

alert(ctx);

// feed pdf.js the context

var myPDFContext = {
  canvasContext: ctx,
  viewport: viewport
};
page.render(myPDFContext);
查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
3楼-- · 2019-07-24 05:30

I was using var ctx= c.getContext('2D'); with the capital 'D' in 2D and that is not correct. It should be a lowercase 'd' in 2d. I realize this is a very simple error, but it brought me here. Hopefully I no one else starts to pull out hair on something so simple.

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
4楼-- · 2019-07-24 05:30

Check the position of your script. I have included it in the <head> section so obviously, it tried to find canvas element even before letting it appended to the DOM. Thus giving undefined or null error.

查看更多
0人赞 添加讨论(0) 举报
We Are One
5楼-- · 2019-07-24 05:30

Some ways to check for errors:

// if all else fails
try {
    var canvas = document.getElementById('canvas1');

    // if canvas element doesn't exist...
    if(!canvas)
        { console.log('Canvas not found.'); }
    else {
        // if the getContext method doesn't exist (old browser)
        if(!canvas.getContext)
            { console.log('Context not supported.'); }
        else {
            var context = canvas.getContext('2d');

            // if this particular context isn't supported
            if(!context)
                { console.log('Context 2D not available.'); }
            else {
                context.beginPath();
                context.moveTo(0,0);
                context.lineTo(300,150);
                context.stroke();
            }
        }
    }
}
catch(exc)
    { console.log(exc); }
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
6楼-- · 2019-07-24 05:44

Firstly, you should check for null:

var c = document.getElementById("canvas1");
if (c != null) {
  // proceed
} else {
  // a problem: what can you do about it?
}

Secondly, make sure you have an element canvas1 - if it exists then c should not be null; if it doesn't exist then there's a discrepancy between the code and content, and you need to decide what should happen in circumstances when this occurs, if it should never occur then it's exceptional and maybe you want the error the be raised, or a message of your own specified, or something.

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
7楼-- · 2019-07-24 05:50

Your code works as far as I can tell (just added the following HTML):

<button onclick="abc()">button</button>
<canvas id="canvas1" height="300" width="300"/>

http://jsfiddle.net/qBHRg/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)