Динамический размер холста в элементе div

Question

Я работаю над веб-сайтом, и я хочу взять то, что я установил между тегами заголовка, и сделать его элементом на самой странице. Я также хочу сделать некоторые манипуляции с текстом, как добавление границ. Я пытаюсь сделать это с помощью элемента canvas, который мне удалось сделать успешно, но я не могу понять, как его масштабировать.

Я нашел несколько ответов на вопрос, как масштабировать, если он занимает весь экран, но не внутри элементов div. Я только начал изучать HTML5 и никогда не делал ничего подобного, прежде чем любая помощь будет оценена.

Javascript код ниже:

function makeCanvas(){ 
//1- Get Object 
var canvas1 = document.getElementById('titlearea'); 
var ctx1 = canvas1.getContext('2d'); 
var title = document.getElementById('pagetitle').text; 

//2- Set parameters 
ctx1.font = '32pt Arial'; 
ctx1.fillStyle = 'DeepSkyBlue'; 
ctx1.strokeStyle = 'Black'; 

//3- Action 
ctx1.fillText(title,200,50); 
ctx1.strokeText(title,200,50); 
    } 

HTML фрагмент ниже:

<div id="title"> 
    <canvas id="titlearea" width="2000" height="75"></canvas> 
</div> 

CSS фрагмент ниже:

#title{ 
     background-color: #E6E6FA; 
     color: #196405; 
     font-size: large; 
     border-bottom:1px solid #000000; 
     padding: 1px; 
     text-align: center; 
     margin:0; 
     width: 100%; 
     height: 75px; 
     } 

Любая помощь приветствуется.

Answer 1

Вам нужно установить явную высоту и ширину на свой тег canvas. По моему опыту, использование CSS для установки ширины/высоты тэга canvas приводит к искажению холста.

Взгляните на этот вопрос на пример того, как изменить размер холста динамически с помощью обработчика изменения размеров в JavaScript: HTML5 Canvas 100% Width Height of Viewport?

Надеется, что это помогает!