Preact

HTML

<div id="app"></div>

CSS

div > * {
    display: inline-block;
}

canvas {
    border: 1px solid black;
}

.container {
    width: 100px;
    height: 100px;
}

svg {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

Preact

/* @jsx h */
let { Component, h, render } = preact

class VectorCanvas extends Component {
	constructor () {
    	super();
        this.onResize = this.onResize.bind(this);
    }
    
    componentDidMount () {
    	window.addEventListener('resize', this.onResize);
        this.onResize();
    }
    
    componentWillUnmount () {
    	window.removeEventListener('resize', this.onResize);
    }
    
    onResize () {
        let canvas = this.base;
        let ctx = canvas.getContext('2d');
        let PIXEL_RATIO = window.devicePixelRatio;

        canvas.width = this.base.offsetWidth * PIXEL_RATIO;
        canvas.height = this.base.offsetHeight * PIXEL_RATIO;
        ctx.setTransform(PIXEL_RATIO, 0, 0, PIXEL_RATIO, 0, 0);
        
        this.props.onDraw(ctx, this.base.offsetWidth, this.base.offsetHeight);
    } 

    render () {
        return <canvas style="width: 100%; height: 100%;"/>;
    }
}

class NonVectorVisualisation extends Component {
	componentDidMount () {
    	let ctx = this.base.getContext('2d');
        ctx.fillStyle = '#ff0000';
        ctx.beginPath();
        ctx.arc(50, 50, 25, 0, Math.PI * 2);
        ctx.fill();
    }

	render () {
    	return <canvas width="100" height="100"/>
    }
}

class VectorVisualisation extends Component {
	constructor () {
    	super();
        this.onDraw = this.onDraw.bind(this);
    }
    
    onDraw (ctx, width, height) {
    	ctx.fillStyle = '#ff0000';
        ctx.beginPath();
        ctx.arc(50, 50, 25, 0, Math.PI * 2);
        ctx.fill();
    }

	render () {
    	return (
        	<div class="container">
    	        <VectorCanvas onDraw={this.onDraw} />
    	    </div>
        );
    }
}

render((
	<div>
	    <NonVectorVisualisation />
        <VectorVisualisation />
        <svg fill="#ff0000">
            <circle cx="50" cy="50" r="25" />
        </svg>
	</div>
), document.querySelector("#app"))