Question

I am facing the problem when i am running this code in 5.0 but it’s working fine in 3.3.
I have set every thing but still it’s giving the problem. Am i doing this in a wrong way?

<canvas width="1000" height="584">

      <drawview width="200" height="300" 
              x="12" 
              y="12">
        <handler name="onwidth">
            this.redraw();
        </handler>
        <handler name="onheight">
            this.redraw();
        </handler>
        <method name="redraw">
            this.clear();
            var roundness = 5;
            this.beginPath();
            this.moveTo(roundness, 0);
            this.lineTo(this.width - roundness, 0);
            this.quadraticCurveTo(this.width, 0, this.width, roundness);
            this.lineTo(this.width, this.height - roundness);
            this.quadraticCurveTo(this.width, this.height, this.width - roundness, this.height);
            this.lineTo(roundness, this.height);
            this.quadraticCurveTo(0, this.height, 0, this.height - roundness);
            this.lineTo(0, roundness);
            this.quadraticCurveTo(0, 0, roundness, 0);
            this.closePath();

            var g = this.createRadialGradient(-this.width * .5, -this.height *.5, .7, 1.5 * this.width, 1.5 * this.height, 0)
            this.globalAlpha = 0;
            g.addColorStop(0, 0x000000);
            this.globalAlpha = 0.8;
            g.addColorStop(1, 0xffffff);

            this.setAttribute("fillStyle", g);
            this.fill();
        </method>
    </drawview>
</canvas>

Answer 1

The onwidth and onheight handler are being called during the initialization of the drawview, at a point in time where the component initialization has not finished. If you check for the isinited attribute of a component, you can make sure that the redraw method is only called when the component is ready. I’ve added some debug output to this example to show you what’s happening:

<drawview id="dv" width="100%" height="100%" 
      x="12" 
      y="12">
  <attribute name="isready" value="false" type="boolean" />
  <handler name="oncontext">
    this.setAttribute("isready", true);
    this.redraw();
  </handler>
  <handler name="onwidth">
    Debug.write('onwidth: calling redraw()');
    this.redraw();
  </handler>
  <handler name="onheight">
    Debug.write('onheight: calling redraw()');
    this.redraw();
  </handler>
  <method name="redraw">
    Debug.info('redraw: this.ininited=' + this.isinited + ' / isready=' + this.isready);
    if (this.isready) {
      this.clear();
      var roundness = 5;
      this.beginPath();
      this.moveTo(roundness, 0);
      this.lineTo(this.width - roundness, 0);
      this.quadraticCurveTo(this.width, 0, this.width, roundness);
      this.lineTo(this.width, this.height - roundness);
      this.quadraticCurveTo(this.width, this.height, this.width - roundness, this.height);
      this.lineTo(roundness, this.height);
      this.quadraticCurveTo(0, this.height, 0, this.height - roundness);
      this.lineTo(0, roundness);
      this.quadraticCurveTo(0, 0, roundness, 0);
      this.closePath();

      var g = this.createRadialGradient(-this.width * .5, -this.height *.5, .7, 1.5 * this.width, 1.5 * this.height, 0);
      this.globalAlpha = 0;
      g.addColorStop(0, 0x000000);
      this.globalAlpha = 0.8;
      g.addColorStop(1, 0xffffff);

      this.setAttribute("fillStyle", g);
      this.fill();
    }
  </method>
</drawview>

Edit: Updated the code support to use the oncontext event instead of isinited value

I’ve checked the drawview documentation, and the drawview has a special event called the oncontext event. From the docs:

The oncontext event is sent when the context is ready to use, which
can take some time in IE DHTML.

If you look at the drawview documentation in the OpenLaszlo reference, you’ll see that the examples use the oncontext event handler to draw into the canvas.
I’ve updated my solution to use an additional attribute isready, which is set to true once the oncontext event has been received. As you can see in the debug output below, isinited is set to true before isready is set to true:

onwidth: calling redraw() 
INFO: redraw: this.ininited=true / isready=false 
onheight: calling redraw() 
INFO: redraw: this.ininited=true / isready=false 
INFO: redraw: this.ininited=true / isready=true 

If you compile your code with errors for the DHTML runtime, you should have seen the following warning:

WARNING: this.context is not yet defined. Please check for the
presence of the context property before using drawing methods, and/or
register for the oncontext event to find out when the property is
available.

Unfortunately such a warning is not shown for the SWF runtime.