I draw a graphic on canvas using Chart.js, then I copy this canvas to another one, add a description and add the final version to PDF.

The problem is that on the phone (Android 6, Chrome) and on the PC (Win7, Chrome) the canvass look different.

This is how it should look like on a PC: enter image description here

And so on the phone: enter image description here

Those. On the phone, for some reason, the graph is drawn on a larger canvas than on a PC. Or he stretches, I do not know.

What could be the problem?

Update:

var pageWidth = 1122; //2339; // 842 var pageHeight = 793; //1654; // 545 // Document var doc = new jsPDF('l', 'mm', 'a4'); // Render var renderDiv = document.createElement('div'); renderDiv.style.position = 'absolute'; renderDiv.style.top = '-1000px'; renderDiv.style.left = '-1000px'; renderDiv.style.width = px(pageWidth); //renderDiv.style.maxWidth = px(pageWidth); var chartCanvas = document.createElement('canvas'); console.log(chartCanvas); renderDiv.appendChild(chartCanvas); document.body.appendChild(renderDiv); // Page var pageCanvas = document.createElement('canvas'); pageCanvas.style.position = 'absolute'; pageCanvas.style.top = '-1000px'; pageCanvas.style.left = '-1000px'; pageCanvas.width = pageWidth; pageCanvas.height = pageHeight; //pageCanvas.style.maxWidth = px(pageWidth); document.body.appendChild(pageCanvas); ///console.log(renderDiv); //console.log(pageCanvas); function px(number) { return number + 'px'; } function clearCanvas(canvas) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); } function drawFirstPage() { var ctx = pageCanvas.getContext("2d"); ctx.fillStyle = "#507299"; ctx.fillRect(0, 0, pageWidth, pageHeight); var x = pageWidth / 2; var y = pageHeight / 2; var lineHeight = 40; ctx.textAlign = "center"; ctx.fillStyle = "#ffffff"; ctx.font = px(38) + " RobotoRegular"; ctx.fillText('', x, y - lineHeight / 2); ctx.font = px(16) + " RobotoRegular"; ctx.fillText('Комплексный отчет по активности сообществ', x, y + lineHeight / 2); ctx.textAlign = "left"; doc.addImage(pageCanvas, 'JPEG', 0, 0); doc.addPage(); } function drawBackground() { var ctx = pageCanvas.getContext("2d"); ctx.fillStyle = "#EDEEF0"; ctx.fillRect(0, 0, pageWidth, pageHeight); } function drawChart(chartObject) { clearCanvas(chartCanvas); var chart = new Chart(chartCanvas, chartObject); var destCtx = pageCanvas.getContext('2d'); destCtx.drawImage(chartCanvas, 0, 0); chart.destroy(); } function drawDescription(chartObject) { function wrapText(context, text, x, y, maxWidth, lineHeight) { var words = text.split(' '); var line = ''; for(var n = 0; n < words.length; n++) { var testLine = line + words[n] + ' '; var metrics = context.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { context.fillText(line, x, y); line = words[n] + ' '; y += lineHeight; } else { line = testLine; } } context.fillText(line, x, y); } var ctx = pageCanvas.getContext("2d"); ctx.fillStyle = "#507299"; var x = 0, y = pageWidth / 2, w = pageWidth, h = pageHeight - y; ctx.fillRect(x, y, w, h); ctx.fillStyle = "#ffffff"; ctx.textBaseline = 'top'; var headerFontSize = Math.floor(pageHeight / 19); var descriptionFontSize = Math.floor(pageHeight / 34); var descriptionOffset = Math.floor(headerFontSize * 1.4); var textPadding = Math.floor(headerFontSize / 5.6); ctx.font = px(headerFontSize) + " RobotoRegular"; ctx.fillText(chartObject.settings.name, x + textPadding, y); ctx.font = px(descriptionFontSize) + " RobotoRegular"; wrapText(ctx, chartObject.settings.descr, x + textPadding, y + descriptionOffset, pageWidth - textPadding, headerFontSize); } function drawStatisticsPage(chart, addPage) { clearCanvas(pageCanvas); drawBackground(pageCanvas); drawChart(chart, pageCanvas); drawDescription(chart, pageCanvas); doc.addImage(pageCanvas, 'JPEG', 0, 0); if (addPage) { doc.addPage(); } } drawFirstPage(); var keys = Object.keys(self.charts); for (var i = 0; i < keys.length; i++) { drawStatisticsPage(self.charts[keys[i]], i != keys.length - 1); } document.body.removeChild(renderDiv); document.body.removeChild(pageCanvas); doc.save('report.pdf');
  • viewport costs for mobile phones? - lazyproger
  • @ Dmitry Prikhodchenko, as far as I understand, yes, they are, because I use Bootstrap 4. - Ilya Bizunov
  • Bring div at 300px under the schedule with background-color, see how it will behave - lazyproger
  • @Dmitry Prikhodchenko, hmm ... It is very much changing in size, almost doubled. But can he forbid it? - Ilya Bizunov

1 answer 1

Put the viewpost (inserts inside the tag)

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">

This will set the initial increase to 1, those should not increase anything.

  • Does not help. I have already tried a lot of different options for setting the viewport, the page itself changes its display, and the canvas as stretched as it was. - Ilya Bizunov
  • Did you insert a div with background? According to it, it would be possible to understand whether the blocks behave correctly or stretch themselves all the same - lazyproger
  • The problem may also be that your canvas does not have a wrapper, because of this it allows itself to stretch. Try again to wrap it in a div with a limited width - lazyproger
  • Canvas wrapped in div, yes. I even tried to ask him the maximum width, but it did not help. - Ilya Bizunov
  • Throw off even the code of aniization, mb in it is an error. Hopelessness - lazyproger