Module:Sandbox/Bawolff/canvas/doc explained

This is an implementation of the 2D canvas drawing API using just CSS.

As an example:

	local canvas = require("Module:Sandbox/Bawolff/canvas")
	local ctx = canvas.getContext('2d', { width=600, height=600 })

	-- draw some eyes
	ctx:moveTo(280, 100)
	ctx:quadraticCurveTo(290, 110, 280, 120)
	ctx:quadraticCurveTo(270, 110, 280, 100)

	ctx:moveTo(320, 100)
	ctx:quadraticCurveTo(330, 110, 320, 120)
	ctx:quadraticCurveTo(310, 110, 320, 100)
	ctx:fill

	-- A mouth
	ctx.fillStyle = 'pink'
	ctx:beginPath
	ctx:moveTo(250, 160)
	ctx:bezierCurveTo(260, 200, 340, 185, 350, 160)
	ctx:bezierCurveTo(340, 180, 260, 180, 250, 160)
	ctx:fill

	-- You can also use SVG paths. Taken from Example.svg
	ctx:setTransform(6.3951354,0,0,6.3951354,-22.626246,-7.1082509)
	local path = canvas.Path2D("M 17.026327,63.789847 C 0.7506376,64.058469 13.88279,66.387154 13.113883,69.323258 C 8.0472417,70.287093 3.5936285,63.565714 6.8090451,59.370548 C 8.7591553,55.717791 15.269922,55.198361 16.902068,59.393261 C 17.532581,60.758947 17.628237,62.396589 17.026327,63.789847 z M 15.306463,62.656109 C 18.852566,58.713773 7.6543584,56.609143 10.765803,61.304742 C 12.124789,62.217715 13.961359,61.705342 15.306463,62.656109 z M 31.307931,62.391383 C 27.130518,63.524026 24.669863,68.663004 27.470717,72.229472 C 25.946657,74.052316 24.253697,71.076237 24.857281,69.636909 C 23.737444,67.038428 17.399862,72.254246 19.386636,68.888657 C 23.159719,67.551193 22.398496,63.711301 22.06067,60.848671 C 24.064085,60.375294 24.370376,65.772689 27.167918,63.326048 C 28.350126,62.546369 29.927362,61.067531 31.307931,62.391383 z M 37.66875,70.598623 C 33.467314,66.62264 32.517064,77.972723 37.30626,74.466636 C 38.742523,73.853608 40.55904,70.38932 37.66875,70.598623 z M 41.677321,70.973131 C 42.340669,75.308182 36.926157,78.361257 33.331921,76.223155 C 29.43435,74.893988 30.618698,67.677232 35.003806,68.567885 C 37.137393,70.592854 42.140265,67.002221 37.656192,66.290007 C 35.242233,65.914214 35.166503,62.640757 38.036954,63.926404 C 40.847923,64.744926 43.227838,68.124735 41.677321,70.973131 z M 62.379099,76.647079 C 62.007404,78.560417 61.161437,84.034535 58.890565,82.010019 C 59.769679,79.039958 62.536382,72.229115 56.947899,72.765789 C 53.790416,73.570863 54.908257,80.968388 51.529286,79.496859 C 51.707831,76.559817 55.858125,71.896837 50.8321,70.678504 C 45.898113,69.907818 47.485944,75.735824 45.286883,78.034703 C 42.916393,76.333396 45.470823,71.647155 46.624124,69.414735 C 50.919507,67.906486 63.618534,70.878704 62.379099,76.647079 z M 66.426447,83.84905 C 67.616398,85.777591 62.114624,94.492698 62.351124,90.31711 C 63.791684,86.581961 65.730376,78.000636 67.391891,74.85575 C 71.027815,73.781175 76.383067,75.350289 76.591972,79.751898 C 77.048545,83.793048 73.066803,88.429945 68.842187,86.765936 C 67.624386,86.282034 66.56741,85.195132 66.426447,83.84905 z M 74.086569,81.803435 C 76.851893,78.050524 69.264402,74.310256 67.560734,78.378191 C 65.893402,80.594099 67.255719,83.775746 69.700555,84.718558 C 72.028708,85.902224 73.688639,83.888662 74.086569,81.803435 z M 82.318799,73.124577 C 84.30523,75.487059 81.655015,88.448086 78.247183,87.275736 C 78.991935,82.387828 81.291029,77.949394 82.318799,73.124577 z M 95.001985,87.684695 C 78.726298,87.953319 91.858449,90.281999 91.089542,93.218107 C 86.0229,94.18194 81.569287,87.460562 84.784701,83.265394 C 86.734814,79.612637 93.245582,79.09321 94.877729,83.28811 C 95.508245,84.653796 95.603892,86.291438 95.001985,87.684695 z M 93.282122,86.550957 C 96.828223,82.608621 85.630017,80.503993 88.741461,85.199592 C 90.100447,86.112565 91.937018,85.600192 93.282122,86.550957 z ")
	ctx.fillStyle = 'red'
	ctx:beginPath
	ctx:fill(path)
	return tostring(ctx)

Makes:

This is a bit of an experiment, so it doesn't fully work. However in theory I believe most of the canvas API could be implemented.

Right now, this is still missing quite a few things, like :stroke.

Parts which could be supported but aren't right now

Anything using the DOMMatrix interface. 3D transforms.

Parts not supported which might in theory be possible but would probably be high effort

textAlign = center is not supported
:stroke of anything that is not a line
Some edge cases around transforms

The parts that i think are impossible to implement:

measureText, TextMetrics api
Any api that lets you get image data and manipulate it in javascript. e.g. ImageBitmap, getImageData, putImageData etc
The following values of globalCompositeOperation - copy, source-in, destination-in, source-out, destination-out, source-atop, destination-atop, xor, lighter. Additionally, globalCompositeOperation might not apply to blending images.
createPattern with a repeat argument - We can only do that with templatestyles, which can't be made programmatically with lua. However if you prepare the appropriate css separately you can make it work
drawFocusIfNeeded
isPointInPath and isPointInStroke - maybe not impossible, but probably very hard.
The maxwidth argument of fillText/strokeText
strokeText does not support lineJoin, lineDashOffset, lineCap
textBaseline other than 'top' or 'bottom' (Currently alphabetic is taken to be 'bottom' as that is the default, however the behaviour is not technically correct).

I suspect everything else could be implemented given enough effort.