画布中的clearRect问题

Question

I'm trying to clear a part of the canvas using clearRect but it doesn't seem to work.

JSFiddle - http://jsfiddle.net/6BJaV/

var canvasWrapper = document.createElement('canvas');
var canvasWrapperContext = canvasWrapper.getContext('2d'); 
canvasWrapper.width = 300;
canvasWrapper.height = 300;


var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 300;
canvasContext.font = "bold 20pt arial";
canvasContext.fillText("APPLE",0,30);
canvasContext.fillText("GRAPE",110,30);

canvasWrapperContext.drawImage(canvas,0,0,canvas.width,canvas.height);

document.body.appendChild(canvasWrapper);

//clear a part of canvas
canvas.clearRect(110,30,110,30);   //clear the text grape
canvasWrapper.clearRect(0,0,canvasWrapper.width,canvasWrapper.height);
canvasWrapperContext.drawImage(canvas,0,0,canvas.width,canvas.height);

In the above code i'm trying to clear the work "GRAPE" but it does not work. Where am I going wrong ?

Answer 1

Watch the console : there are errors.
You did call clearRect on the canvas, when you should call it on the context2d. I think that from this point you should have all work right, for instance replacing your 3 last clearing lines with :

 canvasWrapperContext.clearRect(0,0,210,30);  

Answer 2

There are 2 erros in your code: 1- canvas isns't a context, so it has no method clearRect 2 - you shold call clear rect with these parameters to clear the word grape (110,0,110,30);

your code should be this:

var canvasWrapper = document.createElement('canvas');
var canvasWrapperContext = canvasWrapper.getContext('2d'); 
canvasWrapper.width = 300;
canvasWrapper.height = 300;


var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 300;
canvasContext.font = "bold 20pt arial";
canvasContext.fillText("APPLE",0,30);
canvasContext.fillText("GRAPE",110,30);

canvasWrapperContext.drawImage(canvas,0,0,canvas.width,canvas.height);

document.body.appendChild(canvasWrapper);

canvasWrapperContext.clearRect(110,0,110,30);
canvasContext.clearRect(110,30,110,30);