I use
JSON.stringify(mycanvas)
to get an array of my canvas which looks for example like this:
{"objects":[{"type":"rect","originX":"left","originY":"top","left":0,"top":0,"width":118.33,"height":100,"fill":"rgba(227,92,12, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0}],"background":""}
Here is another example:
{"objects":[{"type":"rect","originX":"left","originY":"top","left":0,"top":441,"width":118,"height":100,"fill":"rgba(48,26,56, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":118,"top":441,"width":118,"height":100,"fill":"rgba(8,170,1, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":236,"top":441,"width":118,"height":100,"fill":"rgba(119,101,179, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":354,"top":441,"width":118,"height":100,"fill":"rgba(50,94,159, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":472,"top":441,"width":118,"height":100,"fill":"rgba(117,67,247, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":590,"top":441,"width":118,"height":100,"fill":"rgba(221,146,196, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":708,"top":441,"width":118,"height":100,"fill":"rgba(43,133,188, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":826,"top":441,"width":118,"height":100,"fill":"rgba(83,43,237, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":944,"top":441,"width":118,"height":100,"fill":"rgba(43,159,214, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":1062,"top":441,"width":118,"height":100,"fill":"rgba(83,227,74, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":1180,"top":441,"width":118,"height":100,"fill":"rgba(40,49,51, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0},{"type":"rect","originX":"left","originY":"top","left":1298,"top":417.24,"width":118,"height":100,"fill":"rgba(177,126,184, 0.75)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1.24,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0}],"background":""}
When I try to reopen the same configuration into a new/empty canvas, I have the following issue: The values inside the JSON array match to the canvas size it was initially created on. When my new/empty canvas has another size, I need to convert all measures proportionally, so it fits perfectly just up- or downscaled to my new canvas.
I don't know, if playing with the width, and heights only helps, think the top and left values need to be converted too.
How would I accomplish this?
