Why does safari merge canvas drawings on mouse move? - html

Question

The video shows the performance problem of safari on canvas drawing.
The drawing takes 100 msec. at average.
When I move cursor point A to B, other browsers draw the canvas at some points between A and B. But on safari, it generally draws on only near A and near B.
If the drawing time is so small, safari behaves like the others.
I think when safari does a drawing job, the mouse events are not triggered to the browser.
Is there a way to fix this problem?
My code:
public void draw() {
long start = System.currentTimeMillis();
canvas.getContext2d().clearRect(Integer.MIN_VALUE / 2,
Integer.MIN_VALUE / 2, Integer.MAX_VALUE, Integer.MAX_VALUE);
canvas.getContext2d().save();
canvas.getContext2d().setFillStyle("red");
for (int i = 0; i < 10000; i++) {
int x = (int)(Math.random() * 1000);
int y = (int)(Math.random() * 600);
canvas.getContext2d().fillRect(x, y, 15, 15);
}
canvas.getContext2d().restore();
logger.finer("Draw Time: " + (System.currentTimeMillis() - start));
}
canvas.addMouseDownHandler(new MouseDownHandler() {
#Override
public void onMouseDown(MouseDownEvent event) {
event.preventDefault();
startX = event.getX();
startY = event.getY();
dragging = true;
}
});
canvas.addMouseMoveHandler(new MouseMoveHandler() {
#Override
public void onMouseMove(MouseMoveEvent event) {
if(dragging)
{
event.preventDefault();
int x = event.getX();
int y = event.getY();
canvas.getContext2d().translate((-startX + x) / startScale,
(-startY + y) / startScale);
draw();
startX = x;
startY = y;
}
}
});
canvas.addMouseUpHandler(new MouseUpHandler() {
#Override
public void onMouseUp(MouseUpEvent event) {
dragging = false;
}
});