# Lines over a picture (edit picture)

**URL:** <https://discourse.nodered.org/t/lines-over-a-picture-edit-picture/32567>\
**Category:** General\
**Created:** [7 September 2020 21:33 UTC](https://discourse.nodered.org/t/lines-over-a-picture-edit-picture/32567 "2020-09-07T21:33:29Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [7 September 2020 21:33 UTC](https://discourse.nodered.org/t/lines-over-a-picture-edit-picture/32567/1 "2020-09-07T21:33:29Z")

</div>

I would like to draw some lines over a picture.

Something like canvas in HTML:  
ctx.moveTo (x0, y0);  
ctx.lineTo (x1, y1);  
ctx.lineTo (x2, y2);  
ctx.lineTo (x3, y3);  
ctx.moveTo (x0, y0);  
ctx.fill ();

Is it possible using node-red?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 September 2020 21:37 UTC](https://discourse.nodered.org/t/lines-over-a-picture-edit-picture/32567/2 "2020-09-07T21:37:20Z")

</div>

Yes - see the awesome [https://flows.nodered.org/node/node-red-contrib-image-tools](https://flows.nodered.org/node/node-red-contrib-image-tools)

---

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [8 September 2020 05:23 UTC](https://discourse.nodered.org/t/lines-over-a-picture-edit-picture/32567/3 "2020-09-08T05:23:50Z")

</div>

I knew about image-tools, but I still couldn't figure out how to draw lines after coordinates.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 September 2020 07:50 UTC](https://discourse.nodered.org/t/lines-over-a-picture-edit-picture/32567/4 "2020-09-08T07:50:42Z")

</div>

Here is something to get you started...

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/8597213ceac2252e43b804d8b83f9e1013959334.png)

```auto
[{"id":"fe0723fa.9f884","type":"inject","z":"45e696b4.b511b8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":940,"y":520,"wires":[["517b20ef.c1f4e"]]},{"id":"517b20ef.c1f4e","type":"jimp-image","z":"45e696b4.b511b8","name":"","data":"{\"w\": 100, \"h\": 100, \"background\": \"red\"}","dataType":"json","ret":"img","parameter1":"","parameter1Type":"msg","parameter2":"","parameter2Type":"msg","parameter3":"","parameter3Type":"msg","parameter4":"","parameter4Type":"msg","parameter5":"","parameter5Type":"msg","parameter6":"","parameter6Type":"msg","parameter7":"","parameter7Type":"msg","parameter8":"","parameter8Type":"msg","sendProperty":"payload","sendPropertyType":"msg","parameterCount":0,"jimpFunction":"none","selectedJimpFunction":{"name":"none","fn":"none","description":"Just loads the image.","parameters":[]},"x":1080,"y":520,"wires":[["42640fb9.ec538"]]},{"id":"edcb513f.9d995","type":"image viewer","z":"45e696b4.b511b8","name":"","width":"152","data":"payload","dataType":"msg","x":1090,"y":580,"wires":[[]]},{"id":"42640fb9.ec538","type":"function","z":"45e696b4.b511b8","name":"draw","func":"var img = msg.payload;\nvar fillColor = 0x00FF00FF;//green\nvar lineColor = 0;\nconst white = 0xFFFFFFFF;//white\nconst black = 0x000000FF;//black\n\nfunction iterator(x, y, offset) { \n this.bitmap.data.writeUInt32BE(lineColor, offset, true); \n}\n\n\n//line 1\nlineColor = black;\nimg.scan(25, 15, 50, 2, iterator);//draw line across top\n\n//line 2\nlineColor = white;\nimg.scan(50, 5, 1, 90, iterator);//draw line down middle\n\n\n//line 1\nlineColor = 0x0000FFFF;//blue\nimg.scan(5, 10, 50, 2, iterator);//draw line x5,y10,w50,h2\n\n//line 2\nlineColor = 0xFF00FFFF;//purple\nimg.scan(5, 10, 2, 20, iterator);//draw line x5,y10,w2,h20\n\n\n\n// fill x, y, w, h\nimg.scan(20, 20, 20, 20, function (x, y, offset) {\n this.bitmap.data.writeUInt32BE(fillColor, offset, true);\n});\n\n\n\nreturn msg;","outputs":1,"noerr":0,"x":930,"y":580,"wires":[["edcb513f.9d995"]]}]

```

---

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [8 September 2020 08:05 UTC](https://discourse.nodered.org/t/lines-over-a-picture-edit-picture/32567/5 "2020-09-08T08:05:13Z")

</div>

About :

```auto
 img.scan(20, 20, 20, 20, function (x, y, offset) {
     this.bitmap.data.writeUInt32BE(fillColor, offset, true);
});

```

Can a fill be made for an irregular surface, consisting of several x and y coordinates ?  
In other words, I draw several lines that form a fenced outline, which will be filled inside with a color.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 September 2020 09:10 UTC](https://discourse.nodered.org/t/lines-over-a-picture-edit-picture/32567/6 "2020-09-08T09:10:31Z")

</div>

Just re-arrange the functions / change the values.

I put comments and examples in the function node so you can figure it out.

Give it a go & come back with your workings if you get stuck.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 November 2020 09:10 UTC](https://discourse.nodered.org/t/lines-over-a-picture-edit-picture/32567/7 "2020-11-07T09:10:33Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.