Как использовать dom елементы в canvas?

Question

[vaskadogana]

Нашел вот такой вариант https://bl.ocks.org/lsbardel/9f61d91fae37b50dac881... где svg элементы отрисовуються в canvas, однако механику процесса не могу понять. Вроде бы всё, что там описано происходит в свг. Однако в canvas тоже рисует

Answer 1

[Максим Тимофеев]

Там рисует или svg или canvas, в зависимости от того, что Вы выбрали. Что в данном примере Вы не можете понять? Там используется библиотека https://d3js.org/ у нее есть документация, там все четко расписано

Comments

[vaskadogana]

в коде нет не одной строчки которая бы отвечала за рисование в canvas
ничего в стиле

var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="red";
ctx.stroke();

есть команды только для отрисовки только в svg append, attr и т.п.
Непонятно как вот этот кусок кода

var xAxis = d3.axisBottom(x)
            .ticks((width + 2) / (height + 2) * 10)
            .tickSize(height)
            .tickPadding(8 - height);

рисует ось с делениями цифрами в canvas, читал документацию про сanvas там ничего нет

или вот

.append('linearGradient')
            .attr('id', 'linear-gradient')
            .attr('x1', '0%')
            .attr('y1', '0%')
            .attr('x2', '100%')
            .attr('y2', '100%')
            .selectAll('stop')
            .data(["#2c7bb6", "#00a6ca", "#00ccbc", "#90eb9d", "#ffff8c", "#f9d057", "#f29e2e", "#e76818", "#d7191c"])
            .enter()

этот код создает градиент в canvas

[Максим Тимофеев]

в коде нет не одной строчки которая бы отвечала за рисование в canvas

d3.select('#canvas').on('click', function () {draw('canvas');});

[vaskadogana]

Максим Тимофеев:
вообще то, в куске который вы процитировали всего лишь по событию онклик вызывается функция draw в аргументе которой указан тип 'canvas?
Я же спрашивал каким образом такой код

var view = paper
            .append("rect")
            .style("fill", 'url(#linear-gradient)')
            .style("stroke-width", 0)
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", width)
            .attr("height", height);

превращается примерно в такой

let line_gradient = context.createLinearGradient(0, y(maxvalue), 0, y(minvalue)); //area what simulate line
			line_gradient.addColorStop("0","rgb(251, 70, 70)");
			line_gradient.addColorStop("0.15","rgb(251, 70, 70)");
			line_gradient.addColorStop("0.4","rgb(63, 251, 167)");
			line_gradient.addColorStop("0.6","rgb(63, 251, 167)");
			line_gradient.addColorStop("0.6","rgb(64, 249, 251)");
			line_gradient.addColorStop("1.0","rgb(64, 249, 251)");

    	let line = d3.line()//line don't maybe will need, now hidden
			    .x(function(d) { return x(d.date); })
			    .y(function(d) { return y(d.y); })
			    .curve(d3.curveLinear)
			    .context(context),
			area = d3.area()//gradient underline
				.x(function(d) { return x(d.date); })
			    .y0(y(0))
			    .y1( (d) => { return y(d.y-1.5); })   
			    .curve(d3.curveLinear) 
			    .context(context);
		context.beginPath();//graphic line
		line(data);
		context.lineWidth = 3;
		context.strokeStyle = line_gradient;
		context.stroke(); //graphic line end

[vaskadogana]

Максим Тимофеев:
p.s. так как в canvas и svg разный синтаксис и объекты
например .append("rect") ничего не даст