d3fc canvas - rotate d3 symbol

Question

I'm using d3fc with canvas rendering and I can succesfully render triangles like so:

import { symbolTriangle } from 'd3-shape';
import { seriesCanvasPoint } from '@d3fc/d3fc-series'; 

seriesCanvasPoint()
    .crossValue(d => d.date)
    .mainValue(d => d.extremePrice)
    .type(symbolTriangle)
    .decorate((context, datum, index) => {
        const symbolColor = datum.peak ? 'red' :
                            datum.trough ? 'blue' : 'white';

        context.fillStyle = symbolColor;

    });

However I would like to rotate some triangles to be upside down (inside decorate function):

        if (datum.peak) {
            context.rotate(Math.PI); //Pi radians = 180 deg
        }

But this does nothing. Why?

Answer 1

This looks very much like a bug in the canvas point series implementation. If you look at the source code, the path instructions are executed:

https://github.com/d3fc/d3fc/blob/master/packages/d3fc-series/src/canvas/point.js#L23

Following which, decorate is called:

https://github.com/d3fc/d3fc/blob/master/packages/d3fc-series/src/canvas/point.js#L28

As a result, decorate can modify the fill and stroke, but not modify the drawing functions in any way. This should be a simple fix.