index.html
<body>
<canvas id ="mainCanvas" width = "400" height = "400"></canvas>
<script src ="script.js"></script>
<script src ="test.js"></script>
</body>
test.js
var canvas = document.getElementById("mainCanvas")
var context = canvas.getContext("2d")
var array = [
context.fillRect
]
array[0](10,10,10,10)
It says:
Uncaught TypeError: Illegal invocation
Normally this context.fillRect(10,10,10,10) works...
So Why can't i call that reference from array?
The problem here is actually context. When you type array[0] you are in the context of that function object (a function is an object in javascript). But you want to be in context of context variable. So there are two solutions
var canvas = document.getElementById("mainCanvas")
var context = canvas.getContext("2d")
var array = [
function(params) {
context.fillRect(params)
}
]
array[0](10,10,10,10)
or second method using call
var canvas = document.getElementById("mainCanvas")
var context = canvas.getContext("2d")
var array = [
context.fillRect
]
array[0].call(context,10,10,10,10)
