do.while

im trying to draw separate "mgraphics" context  into the Image , to reuse later within main context . Everything is working fine unless my drawings use alpha  .

when alpha is provided im getting differences within colors .

mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;
autowatch = 1;

var image ;

function offline(){
    var mg = new MGraphics(100,100);

    with(mg){
        set_source_rgba(0, 1, 0, .5);
        rectangle(0, 0, 100, 100);
        fill();        
    }

    image = new Image(mg);

};

function paint(){

    with(mgraphics){
        save();

        set_source_rgba(0, 1, 0, .5);
        rectangle(0, 0, 100, 100);    
        fill();    

        restore();

        translate(100, 0);
        // set_source_rgba(0, 0, 0, 1); 
        image_surface_draw(image);        
    }
};

offline();
mgraphics.redraw();


mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;
autowatch = 1;

var image ;

function offline(){
	var mg = new MGraphics(100,100);

	with(mg){
		set_source_rgba(0, 1, 0, .5);
		rectangle(0, 0, 100, 100);
		fill();		
	}

	image = new Image(mg);

};

function paint(){

	with(mgraphics){
		save();

		set_source_rgba(0, 1, 0, .5);
		rectangle(0, 0, 100, 100);	
		fill();	

		restore();

		translate(100, 0);
		// set_source_rgba(0, 0, 0, 1); 
		image_surface_draw(image);		
	}
};

offline();
mgraphics.redraw();


jsui-mgraphics-instance-to-image-bug

I can confirm a bit of an issue here with the alpha calculation. Looks like its been this way since the beginning. We will take a closer look, thanks!

is this still a bug? following code looks FUGLY AS F

mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;

var width = 0;
var height = 0;

var outImage;

mgraphics.redraw();


function paint()
{
    
    var mg = new MGraphics(100,100);
    with(mg){
        init(); 
        relative_coords=0;
        autofill=0;
        
        set_source_rgba(.5,.5,.5,.5);

        move_to(0,0);
        line_to(100,97);
        stroke();
        
        move_to(50,50);
        select_font_face("Arial");

        set_font_size(20);

        show_text("mytext");
    }
    
    outImage=new Image(mg);
    
    
    // calculate the current width and height
    width = (box.rect[2] - box.rect[0]);
    height = (box.rect[3] - box.rect[1]);
    
    mgraphics.set_line_width(10);
    
    // special case for drawing inside the box!
     
    with (mgraphics) {
        
        // draw the image
        image_surface_draw(outImage);
    }        
}

is this still a bug?  following code looks FUGLY AS F

mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;

var width = 0;
var height = 0;

var outImage;

mgraphics.redraw();


function paint()
{
	
	var mg = new MGraphics(100,100);
	with(mg){
		init(); 
		relative_coords=0;
		autofill=0;
		
		set_source_rgba(.5,.5,.5,.5);

		move_to(0,0);
		line_to(100,97);
		stroke();
		
		move_to(50,50);
		select_font_face("Arial");

		set_font_size(20);

		show_text("mytext");
	}
	
	outImage=new Image(mg);
	
	
	// calculate the current width and height
	width = (box.rect[2] - box.rect[0]);
	height = (box.rect[3] - box.rect[1]);
	
	mgraphics.set_line_width(10);
	
	// special case for drawing inside the box!
	 
	with (mgraphics) {
		
		// draw the image
		image_surface_draw(outImage);
	}		
}

For anyone searching this, I received confirmation that this is still an outstanding bug in 8.0.6. C74 seems to have made attempts at addressing bugs with image_surface_draw over the years but this one remains.

For anyone searching this, I received confirmation that this is still an outstanding bug in 8.0.6.  C74 seems to have made attempts at addressing bugs with image_surface_draw over the years but this one remains.

hi audiomatt, can you zip up a complete patch + js file + image and attach or send to me privately?

Thankyou for the valuable information.iam very interested with this one.

Thankyou for the valuable information.iam very interested with this one.
looking forward for more like this.
[url=https://telugusexystories.com/]telugu sex stories[/url]
[url=https://telugusexystories.com/]telugu boothu kathalu[/url]

Thankyou for the valuable information.iam very interested with this one.
looking forward for more like this.
telugu sex stories 

Seems as if this is still an issue in 8.2, an example attached. The same image doesn't render horribly with jit.mgraphics, so it seems something specific to the JS image_surface_draw.

I'd been hoping that I could separately cache the layers of a reasonably intensive UI as images and only re-render elements as needed, but doesn't look like that'll fly :-(

I guess I could cache paths instead with copy_path? Or admit defeat and do it in C.

mgraphics woes.zip

    "version" : "Version 8.2.0 (42e5454dc76) (x64 mac)",

    "osversion" : "Mac OS X Version 10.15.7 (Build 19H1217) x86_64",

Seems as if this is still an issue in 8.2, an example attached. The same image doesn't render horribly with jit.mgraphics, so it seems something specific to the JS image_surface_draw. 

I'd been hoping that I could separately cache the layers of a reasonably intensive UI as images and only re-render elements as needed, but doesn't look like that'll fly :-( 

I guess I could cache paths instead with copy_path? Or admit defeat and do it in C. 

Trimmed version spiel: 
	"version" : "Version 8.2.0 (42e5454dc76) (x64 mac)",
	"platform" : "mac",
	"arch" : "x64",
	"osversion" : "Mac OS X Version 10.15.7 (Build 19H1217) x86_64",

looks to me like you simply need to provide a background color to the image cache for proper background blending. simply moving the lines 

function render(mg) {
    with (mg) {
        rectangle(0, 0, width, height);
        set_source_rgb(0.3, 0.3, 0.3);
        fill();
        set_source_rgb(1, 0, 0);
        set_line_width(4);
        move_to(0, height - data[0]);
        for (var i = 0; i < width; i++)
            line_to(i, height - data[i])
        stroke();
    }
}

looks to me like you simply need to provide a background color to the image cache for proper background blending.  simply moving the lines rectangle, set_source_rgb and fill to the render function fixes things:

That's indeed what I've ended up doing for now. For the project in question, the UI is made up of a bunch of layers of different plots (waveforms, feature curves), and I'd been hoping to cache them separately so that individual layers would only need to be re-rendered as and when they change, and then draw them on top of each other (hence the fixed background).

aha, I see how this won't work for that use-case. not sure if there's a better workaround unfortunately. maybe with Sketch instead of Mgraphics?

Hope this helps you deal with the problem. It works... on my machine ;-)

mgraphics_woes_v2.zip

@OWEN, @ROB

Hope this helps you deal with the problem. It works... on my machine ;-)

hey all, just a quick note to say that the issues reported in this thread should be fixed up with the 8.3 update.

JSUI / MGraphics : instance to image - alpha channel bug ?