Callback error when annotation surpasses the border of canvas

[ycaokris]

• When pencil draws from middle toward upper border, portion which surpasses the border appears on the other side.
• When pencil passes beyond lower or right boundary of canvas body, callback error is raised. I believe this is related with how parse_json handles binary masks and relative indices of path, I tried to edit https://github.com/plotly/dash-canvas/blob/81ce2d8e70e78abf3abcdb5bb2e98bc4eb345a76/dash_canvas/utils/parse_json.py#L78 from where error happens but I'm not able to lock it down.

Sample code:

import dash
import dash_html_components as html
from dash_canvas import DashCanvas
from dash_canvas.utils import array_to_data_url, parse_jsonstring
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import numpy as np

app = dash.Dash(__name__)

canvas_width = 500
canvas_height = 200

app.layout = html.Div([
    html.H6('Draw on image and press Save to show annotations geometry'),
    html.Div([
    DashCanvas(id='canvas',
               lineWidth=2,
               width=500,
               height=200,
               hide_buttons=["zoom", "pan", "line", "pencil", "rectangle", "undo", "select"],
               lineColor='black',
               goButtonTitle='Sign'
               ),
    ], className="five columns"),
    html.Div([
    html.Img(id='my-image', width=300),
    ], className="five columns"),
    ])

@app.callback(Output('my-image', 'src'),
              [Input('canvas', 'json_data')])
def update_data(string):
    if string:
        mask = parse_jsonstring(string, (canvas_height, canvas_width))
    else:
        raise PreventUpdate
    return array_to_data_url((255 * mask).astype(np.uint8))

if __name__ == '__main__':
    app.run_server(debug=True)

[ycaokris]

This also happens on the example on the docs, Although it looks a bit skewed and unnoticeable at this moment, an error is raised for updating dash component when pencil surpasses far from the right/bottom boundary.