Canvas Draw Polygon with Fill in one operation

[andyhill]

I have moved this from "Canvas Load PNG Image at X/Y with Transparency (Opacity)" so it can have it's own thread.

I need to Draw a Closed Polygon with Fill, not draw a polygon, then locate that polygon, then fill that polygon which is inconsistent due to anti-aliasing issues with irregular shapes.

It appears UniGUI Canvas has no Polygon function (please add in future).

Farshad, I found this on the Internet and ask for help to make it work.

var context='#1'._cc_; 
var poly = [5, 5, 100, 50, 50, 100, 10, 90]; 
var shape = poly.slice(0);
{
  context.fillStyle = '#f00'; 
  context.beginPath();
  context.moveTo(shape.shift(), shape.shift());
  while(shape.length) 
  {
    context.lineTo(shape.shift(), shape.shift());
  } 
  context.closePath();
  context.fill();
} 
 

[andyhill]

Farshad, please advise

[andyhill]

Farshad, this is very important for me, please show using code above how to draw an irregular closed polygon with flood fill as one action, not separate actions. 

[Farshad Mohajeri]

I'm not good at HTML5 drawing library. You can find the solution by reviewing HTML5 tutorials.

[Farshad Mohajeri]

function click(sender, e, eOpts)
{
  var context=MainForm.UniCanvas1._cc_; 
   var poly = [5, 5, 100, 50, 50, 100, 10, 90]; 
   var shape = poly.slice(0);
   {
     context.fillStyle = '#f00'; 
     context.beginPath();
     context.moveTo(shape.shift(), shape.shift());
     while(shape.length) 
     {
       context.lineTo(shape.shift(), shape.shift());
     } 
     context.closePath();
     context.fill();
   } 
}

Worked for me.

[andyhill]

The code mimics your Draw PNG Image JS, when I run it, it says cannot run JS here, please look at the code - thanks. 

[Farshad Mohajeri]

[Farshad Mohajeri]

[andyhill]

Yes, but when I implement this code outside of the canvas click event, in other words from a button click, I get these errors below.

[Farshad Mohajeri]

Please send your code.

[andyhill]

It is a massive graphics webapp, please cut the above code out of the Events editor and put in a button click and you will get the same results.

 

[andyhill]

  cArea.JSInterface.JSCode('var context=MainForm.cArea._cc_; '+
                           'var poly = ['+s+']; '+
                           'var shape = poly.slice(0); '+
                           '{ '+
                           '  context.fillStyle = ''#f00'' '+
                           '  context.beginPath(); '+
                           '  context.moveTo(shape.shift(), shape.shift()); '+
                           '  while(shape.length) '+
                           '  { '+
                           '    context.lineTo(shape.shift(), shape.shift()); '+
                           '  } '+
                           '  context.closePath(); '+
                           '  context.fill(); '+
                           '} '
                          );
 

[andyhill]

I tried 

UniSession.AddJS(

as well

[Farshad Mohajeri]

Add a ';' to end of your code to see if it changes anything.

[Farshad Mohajeri]

 

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  UniCanvas1.JSInterface.JSCode('var context = MainForm.UniCanvas1._cc_; '+
                             'var poly = [5, 5, 100, 50, 50, 100, 10, 90];'+
                             'var shape = poly.slice(0); '+
                             '  context.fillStyle = "#f00"; '+
                             '  context.beginPath(); '+
                             '  context.moveTo(shape.shift(), shape.shift()); '+
                             '  while(shape.length) '+
                             '  { '+
                             '    context.lineTo(shape.shift(), shape.shift()); '+
                             '  } '+
                             '  context.closePath(); '+
                             '  context.fill();'
                            );
end;

 

[andyhill]

Tried a few variations, still no go.

  with cArea do begin
    JSInterface.JSCall('var context=MainForm.cArea._cc_; '+
                       'var poly = ['+s+']; '+
                       'var shape = poly.slice(0); '+
                       '{ '+
                       '  context.fillStyle = ''#f00'' '+
                       '  context.beginPath(); '+
                       '  context.moveTo(shape.shift(), shape.shift()); '+
                       '  while(shape.length) '+
                       '  { '+
                       '    context.lineTo(shape.shift(), shape.shift()); '+
                       '  } '+
                       '  context.closePath(); '+
                       '  context.fill(); '+
                       '}; '
                      );
  end;
 

 

[Sherzod]

9 minutes ago, andyhill said:

 '  context.fillStyle = ''#f00'' '+

 '  context.fillStyle = ''#f00''; '+

[andyhill]

Yes, Yes, Yes, my humblest apologies for making such a stupid mistake - Thank You Farshad.